Horizontal Separator
Divides sections horizontally
End of content
---
import { Separator } from "@/components/ui/separator"
---
<div class="flex w-full max-w-sm flex-col gap-4">
<div>
<h4 class="text-sm font-medium">Horizontal Separator</h4>
<p class="text-muted-foreground text-sm">Divides sections horizontally</p>
</div>
<Separator />
<div>
<h4 class="text-sm font-medium">End of content</h4>
</div>
</div>Installation
npx shadcn@latest add @fulldev/separatorUsage
import { Separator } from "@/components/ui/separator"<Separator />
<Separator decorative={false} />Examples
Account Billing Settings
---
import { Separator } from "@/components/ui/separator"
---
<div class="flex items-center gap-3 text-sm leading-none">
<span>Account</span>
<Separator orientation="vertical" />
<span>Billing</span>
<Separator orientation="vertical" />
<span>Settings</span>
</div>Notes
- Use
decorative={false}when the separator conveys structure to assistive technology. - Vertical separators stretch inside flex rows by default.
API Reference
See the GitHub source code for more information on props.