Separator
LayoutMITHorizontal or vertical visual divider.
bun add @otfdashkit/ui
Preview
SeparatorLayout
Loading Storybook preview…
Code
@otfdashkit/uiimport { Separator } from '@otfdashkit/ui'
export function Example() {
return (
<div className="w-64 space-y-4">
<div>
<h4 className="text-sm font-medium">Horizontal</h4>
<p className="text-xs text-[hsl(var(--muted-foreground))]">Below me is a separator</p>
<Separator className="my-2" />
<p className="text-xs text-[hsl(var(--muted-foreground))]">Above me is a separator</p>
</div>
<div className="flex items-center h-8 gap-2 text-sm">
<span>Left</span>
<Separator orientation="vertical" />
<span>Center</span>
<Separator orientation="vertical" />
<span>Right</span>
</div>
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.