<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>pnpm dlx 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.
OrientationMissing description.
| Prop | Type | Default | |
|---|---|---|---|
| | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<div className="w-full">
<Dynamic(Separator) orientation="horizontal" />
</div>