Data display · Application UI
Separator
A thin horizontal or vertical dividing line built on Base UI's Separator primitive for visually separating content sections.
Feature showcase
Installation
Features
6 examples
Default, Custom Styling, In Card, In Nav, Vertical, With Label.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Controls whether the separator renders as a horizontal line or a vertical rule. |
| className | string | - | Additional CSS class names to apply to the separator element. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/separator.tsx |
| Default example | content/examples/separator/default.tsx |
| Custom Styling example | content/examples/separator/custom-styling.tsx |
| In Card example | content/examples/separator/in-card.tsx |
| In Nav example | content/examples/separator/in-nav.tsx |
| Vertical example | content/examples/separator/vertical.tsx |
| With Label example | content/examples/separator/with-label.tsx |