Separator
Visual divider for separating content sections. Uses the neutral border color for subtle, non-intrusive separation.
Installation
$ npx shadcn@latest add separatorPreview
Content above
Content below
Orientations
Horizontal separator
Content below
Side by side
Usage (React/TSX)
import { Separator } from "@/components/ui/separator"
export default function Example() {
return (
<div>
<p>Content above</p>
<Separator />
<p>Content below</p>
</div>
)
}Usage (HTML/CSS)
<hr class="ds-separator" />
<style>
.ds-separator {
border: none;
height: 1px;
background: #e4e4e7;
width: 100%;
}
</style>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | The direction of the separator. |
| decorative | boolean | true | If true, not announced by screen readers. |
| className | string | — | Additional CSS classes to apply. |
Design Notes
- Uses neutral border color (#e4e4e7) for subtle separation.
- 1px height for horizontal, 1px width for vertical.
- Decorative by default — not announced by screen readers.