Skip to content

Separator

LayoutMIT
View in Storybook

Horizontal or vertical visual divider.

bun add @otfdashkit/ui

Preview

Separator
Loading Storybook preview…

Code

import { 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.