Divider

Divider renders a thin separator line — horizontal or vertical, plain or with a centered/leading/trailing label. Pure Server Component, no client JS.

import { Divider } from '@42/ui-react/divider';

<Divider />
<Divider label="OR" />
<Divider orientation="vertical" />

Playground

<Component orientation="horizontal" size="xs" />

Full prop browser

Orientation

orientation="vertical" swaps the line from the block axis to the inline axis (border-inline-start under the hood) and relies on align-self: stretch to fill its parent's height — it has no self-sizing, so it needs a flex or grid parent that already provides a definite height. Without one, it collapses to zero height, the same limitation Mantine's own Divider has.

<Divider /><div className="flex h-24 items-center gap-4">  <span>Left</span>  <Divider orientation="vertical" />  <span>Right</span></div>

With a label

Pass label to center content on the line — a word, a short phrase, an icon. labelPosition ("start" | "center" | "end", default "center") follows flexbox's own logical main-axis edges rather than Mantine's "left"/"right", so it flips correctly under dir="rtl" with no extra CSS (the same convention Drawer's placement prop uses). The combination also works with orientation="vertical" — unlike Mantine's own Divider, whose CSS never adapts the label layout for that case.

<Divider label="OR" /><Divider label="Section" labelPosition="start" /><Divider label="End" labelPosition="end" />

<div className="flex h-32 items-center gap-4">  <span>Left</span>  <Divider orientation="vertical" label="OR" />  <span>Right</span></div>

Sizes

size (the kit's canonical xs–xl scale) controls line thickness, 1–5px — the same mapping Mantine uses. Defaults to xs, unlike most of the kit's components (which default to md): a hairline reads better thin by default.

<Divider size="xs" /><Divider size="sm" /><Divider size="md" /><Divider size="lg" /><Divider size="xl" />

Variants

variant sets the border style — solid (default), dashed, or dotted.

<Divider variant="solid" /><Divider variant="dashed" /><Divider variant="dotted" />

Colors

Unset, Divider renders a neutral hairline. Pass color to tint the line (and its label's flanking lines) to any palette accent.

<Divider /><Divider color="brand" /><Divider color="red" variant="dashed" />

API

Accessibility

Divider renders role="separator", and sets aria-orientation="vertical" when orientation="vertical" (horizontal is ARIA's implicit default, so it's omitted there). It's non-interactive — no tabIndex, no focus handling.

Remember that orientation="vertical" has no self-sizing — place it inside a flex or grid container with a real height, or it renders with zero height and effectively disappears from the accessibility tree's visual layout too.