Divider

A visual separator that creates clear boundaries between content sections. Supports horizontal rules, vertical lines, and labeled dividers for logical grouping.

Horizontal Divider

Between content blocks

Section A

Section B

Section C

<Stack gap="md">
  <PlaceholderBox>Section A</PlaceholderBox>
  <Divider />
  <PlaceholderBox>Section B</PlaceholderBox>
  <Divider />
  <PlaceholderBox>Section C</PlaceholderBox>
</Stack>

Labeled Divider

With centered label

Email Sign-In

Social Sign-In

<Stack gap="md">
  <PlaceholderBox>Email Sign-In</PlaceholderBox>
  <Divider label="OR" />
  <PlaceholderBox>Social Sign-In</PlaceholderBox>
</Stack>

Vertical Divider

In a flex row

Left

Center

Right

<Cluster gap="md" align="center">
  <div className="px-4 py-2 ...">Left</div>
  <Divider orientation="vertical" />
  <div className="px-4 py-2 ...">Center</div>
  <Divider orientation="vertical" />
  <div className="px-4 py-2 ...">Right</div>
</Cluster>

API Reference

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The direction of the divider line.
`label`	`string`	—	Optional centered text label within a horizontal divider (e.g. "OR").
`className`	`string`	—	Additional CSS classes to apply to the divider element.