Separator
Visual divider line, horizontal or vertical
Preview
Above
Below
Usage
import { Separator } from "@/components/ui/separator"
<div>
<h4 className="text-sm font-medium">Settings</h4>
<Separator className="my-4" />
<p className="text-sm text-muted-foreground">Manage your preferences.</p>
</div>
{/* Vertical separator */}
<div className="flex h-5 items-center space-x-4 text-sm">
<span>Blog</span>
<Separator orientation="vertical" />
<span>Docs</span>
<Separator orientation="vertical" />
<span>Source</span>
</div>Defaults to horizontal orientation. Set orientation="vertical" for use in flex layouts.
Install
npx shadcn add @bonsai/separator