Separator
Visually or semantically separates content.
Installation
npx shadcn@latest add separatorUsage
Import and use the separator component in your project.
import { Separator } from "@/components/ui/separator"
export default function MyComponent() {
return (
<div>
<div className="space-y-1">
<h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
<p className="text-sm text-muted-foreground">
An open-source UI component library.
</p>
</div>
<Separator className="my-4" />
<div className="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
<div>Docs</div>
<Separator orientation="vertical" />
<div>Source</div>
</div>
</div>
)
}Examples
Horizontal
Default horizontal separator.
Radix Primitives
An open-source UI component library.
Next.js
The React Framework for the Web.
Vertical
Vertical separator for inline content.
Blog
Docs
Source
API Reference
Props available for the Separator component.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the separator. |
| decorative | boolean | true | Whether the separator is purely decorative. |
| className | string | - | Additional CSS classes to apply. |
Accessibility
Separator component follows WAI-ARIA separator pattern.
Semantic vs Decorative
By default, the separator is decorative and hidden from screen readers. Set decorative=false if it provides semantic meaning.
Components
On This Page