<div className="flex items-center gap-10">
<div className="flex h-5 items-center gap-2 text-sm">
<div>Components</div>
<Separator orientation="vertical" />
<div>Hooks</div>
</div>
<div className="flex flex-col items-center gap-2 text-sm">
<div>Components</div>
<Separator orientation="horizontal" />
<div>Hooks</div>
</div>
</div>npx shadcn@latest add @dotui/separatorUse separators to visually divide content in lists, menus, or other places.
import { Separator } from "@/components/ui/separator";<Separator />Use the controls below to experiment with different separator props and see the live preview and code update.
The orientation of the separator.
Orientation<div className="w-full">
<Separator orientation="horizontal" />
</div>Missing description.
| Prop | Type | Default | |
|---|---|---|---|
Orientation | 'horizontal' | ||
string | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.