Divider

48 · Extended UI

Separates content blocks with a horizontal line. Text placed inside it is shown in the middle, at the start or at the end of the line.

acun:divider

Basic usage

Without content, a thin horizontal line (<hr>) is drawn. Set the top and bottom spacing with class, e.g. my-4.

LIVE EXAMPLE

<p class="text-sm text-gray-600 dark:text-zinc-400">The customer details were updated.</p>
<acun:divider class="my-4" />
<p class="text-sm text-gray-600 dark:text-zinc-400">Next invoice: October 14, 2026.</p>

Prop	Values
`class`	Spacing classes, e.g. my-4

With text

Short text in the slot is shown in the middle of the line, in small uppercase letters. Suitable for the "or" separator on sign-in screens.

LIVE EXAMPLE

<acun:button class="w-full">Sign in with email</acun:button>
<acun:divider>or</acun:divider>
<acun:button variant="white" class="w-full">Sign in with phone number</acun:button>

Text alignment

align sets the position of the text; the default is center. Use start for headings of form sections.

LIVE EXAMPLE

<acun:divider align="start">Personal details</acun:divider>
<acun:divider>Address</acun:divider>
<acun:divider align="end">End</acun:divider>

Prop	Values
`align`	start \| center \| end

Line style

variant chooses the line style; the default is solid (solid). It works the same with and without text.

LIVE EXAMPLE

<acun:divider />
<acun:divider variant="dashed" />
<acun:divider variant="dotted">Archive</acun:divider>

Prop	Values
`variant`	solid \| dashed \| dotted

API

Props and slots

The values the component accepts.

Prop	Default	Description
`align`	`center`	start · center · end (when there is text)
`variant`	`solid`	solid · dashed · dotted

Slots: default content (optional divider text)