Stepwise UI

Separator

A thin divider between content. Horizontal or vertical, with an optional centered label.

Installation

npx stepwise-ui add separator

Horizontal

Account settingsDanger zone
import { Separator } from '@/components/stepwise/separator'

<Separator />

With label

<Separator label="OR" />

Vertical

DocsGuidesAPI
<div className="flex h-6 items-center gap-4">
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Guides</span>
</div>

Props

PropTypeDescription
orientation
'horizontal' | 'vertical'
Direction. Default horizontal.
label
ReactNode
Centered label - horizontal only.
className
string
Merged onto the root.