StockFind Brand

Separators

Visual dividers for content sections

Horizontal

Content above separator

Content below separator

<div className="flex flex-col gap-4">
  <p>Content above separator</p>
  <Separator />
  <p>Content below separator</p>
</div>

Vertical

Item 1Item 2Item 3
<div className="flex h-8 items-center gap-4">
  <span>Item 1</span>
  <Separator orientation="vertical" />
  <span>Item 2</span>
  <Separator orientation="vertical" />
  <span>Item 3</span>
</div>

Props Reference

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Separator direction

On this page