A hairline rule, horizontal or vertical, optionally labelled, with spacing steps.
Divider separates groups inside a panel. label puts a short word in the rule ("or").
Installation
npx shadcn@latest add KezLahd/rime/dividerAlso installs: base.
Usage
import { Divider } from "@/components/ui";
<Divider spacing="sm" />Examples
Default and labelled
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Divider
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | |
| label | ReactNode | Centred text in the rule: "or", a section name. | |
| spacing | "none" | "sm" | "md" | "lg" | "md" | Vertical margin for horizontal dividers. |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
This component has no tokens of its own; it reads the system tokens below.
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --ink-muted | tokens.css | … |
| --line-glass | tokens.css | … |
| --line-soft | tokens.css | … |
| --text-micro | tokens.css | … |
| --tracking-eyebrow | tokens.css | … |
Accessibility
- role="separator" with aria-orientation; decorative rules inside lists are hidden.
Do and don't
Do
- Prefer space over rules where space does the job.
Don't
- Don't stack dividers and borders on the same edge.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open divider.md