Separator
A visual divider between content sections with horizontal or vertical orientation.
Horizontal
Vertical (in flex row)
BlogDocsSource
In context (section divider)
Radix Primitives
An open-source UI component library.
BlogDocsSource
Installation
pnpm
pnpm dlx @hex-core/cli add separatorVertical
Vertical divider in a flex row
tsx
<div className="flex h-5 items-center gap-4">
<span>Left</span>
<Separator orientation="vertical" />
<span>Right</span>
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | horizontal | Direction of the separator |
decorative | boolean | true | If true, separator is purely visual and hidden from screen readers |
className | string | — | Additional CSS classes |
AI Guidance
When to use
Use to visually separate content sections, menu items, or sidebar groups.
When not to use
Don't use for spacing (use margin/padding). Don't use between every list item.
Common mistakes
- Using as spacing instead of semantic separation
- Forgetting orientation='vertical' needs parent height
Accessibility
Set decorative=false if the separator conveys semantic meaning. Radix handles role='separator'.
Related components
Token budget: 150