The Separator component provides a visual divider between content sections.
Installation
import { Separator } from "@craftdotui/baseui/components/separator";
Usage
Props
orientation
string
default:"horizontal"
Orientation of the separator.Options: horizontal, vertical
Examples
Horizontal Separator
<div>
<p>Content above</p>
<Separator />
<p>Content below</p>
</div>
Vertical Separator
<div className="flex items-center">
<span>Left</span>
<Separator orientation="vertical" />
<span>Right</span>
</div>
<div className="space-y-1">
<div>Menu Item 1</div>
<div>Menu Item 2</div>
<Separator />
<div>Menu Item 3</div>
<div>Menu Item 4</div>
</div>
Custom Styling
<Separator className="bg-primary" />
Accessibility
- Built on @base-ui/react Separator primitive
- Proper semantic role=“separator”
- Orientation communicated to screen readers
- Default margins for spacing