Dm DuskMoon React
Standard duskmoon implemented 7 demos

Divider

Divider separates dense content while preserving visual rhythm.

Import @duskmoon-dev/components/divider
6 API sections
6 documented props
4 behavior scenarios
Key API
orientationvariantthicknesscolorspacinglabelPosition

Usage

When to use

  • Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
  • Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.
State Start with default props for static examples, then switch to controlled props when state must be shared.
Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Divider is most often configured through `orientation`, `variant`, `thickness`, `color`.

Covered behavior

Renders a separator with default classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Colors

authored

Divider supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.

Source
import "@duskmoon-dev/components/styles.css";
import { Divider } from "@duskmoon-dev/components/divider";

const colors = [
  "primary",
  "secondary",
  "tertiary",
  "accent",
  "neutral",
  "base",
  "info",
  "success",
  "warning",
  "error"
] as const;

export function DividerColorsDemo() {
  return (<div style={{ display: "grid", gap: 14 }}>
  {colors.map((color) => (
    <Divider key={color} color={color}>
      {color}
    </Divider>
  ))}
</div>);
}
Preview

Basic usage

authored

Import the component stylesheet and Divider from its package subpath, then render it with the core props.

Source
import "@duskmoon-dev/components/styles.css";
import { Divider } from "@duskmoon-dev/components/divider";

export function Example() {
  return (<Divider
  color="primary"
>
  DuskMoon Divider
</Divider>);
}
Preview

Renders a separator with default classes

test-backed

Divider scenario from the component test coverage: renders a separator with default classes.

Source
import "@duskmoon-dev/components/styles.css";
import { Divider } from "@duskmoon-dev/components/divider";

export function DividerRendersASeparatorWithDemo() {
  return (<Divider
  // Renders a separator with default classes
  color="primary"
>
  DuskMoon Divider
</Divider>);
}
Preview

Applies vertical, variant, color, thickness, and spacing classes

test-backed

Divider scenario from the component test coverage: applies vertical, variant, color, thickness, and spacing classes.

Source
import "@duskmoon-dev/components/styles.css";
import { Divider } from "@duskmoon-dev/components/divider";

export function DividerAppliesVerticalVariantColorDemo() {
  return (<Divider
  // Applies vertical, variant, color, thickness, and spacing classes
  color="primary"
>
  DuskMoon Divider
</Divider>);
}
Preview

Renders label content with label position classes

test-backed

Divider scenario from the component test coverage: renders label content with label position classes.

Source
import "@duskmoon-dev/components/styles.css";
import { Divider } from "@duskmoon-dev/components/divider";

export function DividerRendersLabelContentWithDemo() {
  return (<Divider
  // Renders label content with label position classes
  color="primary"
>
  DuskMoon Divider
</Divider>);
}
Preview

Applies custom className

test-backed

Divider scenario from the component test coverage: applies custom classname.

Source
import "@duskmoon-dev/components/styles.css";
import { Divider } from "@duskmoon-dev/components/divider";

export function DividerAppliesCustomClassNameDemo() {
  return (<Divider
  // Applies custom className
  color="primary"
>
  DuskMoon Divider
</Divider>);
}
Preview
Sunshine Theme
Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source
<div data-theme="sunshine">
  <Divider
  color="primary"
>
  DuskMoon Divider
</Divider>
</div>

<div data-theme="moonlight">
  <Divider
  color="primary"
>
  DuskMoon Divider
</Divider>
</div>

API

The API reference below lists every parsed exported type or interface for Divider. Start with `orientation`, `variant`, `thickness`, `color` for common usage.

Types: packages/components/src/components/divider/Divider.types.ts Scenarios: packages/components/src/components/divider/Divider.test.tsx
DividerProps interface extends ComponentProps<"div">
Prop Type Required Description
orientation DividerOrientation No orientation configures Divider.
variant DividerVariant No variant configures Divider.
thickness DividerThickness No thickness configures Divider.
color DividerColor No color configures Divider.
spacing DividerSpacing No spacing configures Divider.
labelPosition "center" | "left" | "right" No labelPosition configures Divider.
DividerOrientation type 
"horizontal" | "vertical"
DividerVariant type 
"solid" | "dashed" | "dotted"
DividerThickness type 
"thin" | "medium" | "thick"
DividerColor type 
| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"
DividerSpacing type 
"normal" | "compact" | "comfortable" | "spacious"