Horizontal or vertical rules between sections.
Also known as: divider, horizontal rule, vertical divider
Install with the CLI, or copy the component source into your project.
Add separator (npm)
1npx --yes -p @default-file/ui df-ui add separator
Default orientation.
Above
Below
Inline divider between items.
Horizontal or vertical rule between sections.
| Prop | Type | Default | Notes |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the rule. |
| decorative | boolean | true | When true, treated as presentational for assistive tech. |
| className | string | - | Additional styles. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --border | CSS color | var(--df-neutral-100) | Rule color. |