Divider

A horizontal rule or labeled section separator.

ExamplesCodeUsageChangelog

Basic usage

A plain divider with no label.

Section above

---

Section below

Tailwind v4

<Divider />

With label

Pass label to show centered text between the lines.

Previous items

OR

New items

Tailwind v4

<Divider label="OR" />

Variants

Dashed

---

Tailwind v4

<Divider variant="dashed" />

Dotted

---

Tailwind v4

<Divider variant="dotted" />

Dashed with label

Continue reading

Tailwind v4

<Divider label="Continue reading" variant="dashed" />

Custom color

Highlight

Tailwind v4

<Divider color="#2563eb" label="Highlight" />

Props

Prop	Type	Default	Description
label	string	undefined	Optional centered text label
variant	'solid' | 'dashed' | 'dotted'	'solid'	Line style
color	string	'#e5e7eb'	CSS color value for the line