Horizontal (default)
Profile
Manage your account settings.
Notifications
Choose what you get notified about.
import { Separator } from '@mihcm/ui/Separator';
<div className="space-y-4">
<div>
<h4 className="text-sm font-medium">Profile</h4>
<p className="text-sm text-muted-foreground">Manage your account settings.</p>
</div>
<Separator />
<div>
<h4 className="text-sm font-medium">Notifications</h4>
<p className="text-sm text-muted-foreground">Choose what you get notified about.</p>
</div>
</div>Vertical in a toolbar
The parent needs a defined height for vertical separators.
import { Separator } from '@mihcm/ui/Separator';
import { Button } from '@mihcm/ui/Button';
<div className="flex h-10 items-center gap-2">
<Button variant="ghost" size="sm">Undo</Button>
<Button variant="ghost" size="sm">Redo</Button>
<Separator orientation="vertical" />
<Button variant="ghost" size="sm">Cut</Button>
<Button variant="ghost" size="sm">Copy</Button>
<Button variant="ghost" size="sm">Paste</Button>
</div>Non-decorative separator
When the separator divides two genuinely independent sections, set decorative={false} so it appears in the accessibility tree.
<Separator decorative={false} />