Display
Separator
A 1px rule in the border colour, horizontal or vertical.
packages/design-system/components/ui/separator.tsx
Examples
ScopeTimeline
BrandWeb
Anatomy
- 01Rule, bg-border
Usage
import { Separator } from "@repo/design-system/components/ui/separator";
<Separator />
<Separator orientation="vertical" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Vertical stretches to the row's height. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Use it between groups, not between every item.
Don't
- Use it where spacing alone would do.