Skip to main content

Divider

Horizontal or vertical rule with weight and line-style variants, fade hairlines with cut-out sides, plus optional labeled breaks (start, center, end).

Default


Weight (subtle / strong)




Fade (cut-out sides, low opacity)

Full width vs inset — tapers before edges

Fade + label

Line style (dashed / dotted)



Vertical

DraftsPublishedArchived

Label (center)

Label align (start / end)

Labeled + dashed

In content

Section one content above.


Section two content below.

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
modeOptional"light" | "dark"lightColor mode.
variantOptional"default" | "subtle" | "strong" | "fade"defaultBorder contrast, or fade — low-opacity gradient tapered at both ends.
insetOptionalbooleanfalseFade variant — horizontal inset so the line fades before container edges.
fadeOpacityOptionalnumber0.4Fade variant — peak line opacity (0–1).
lineStyleOptional"solid" | "dashed" | "dotted"solidLine pattern.
orientationOptional"horizontal" | "vertical"horizontalHorizontal rule or vertical separator between inline items.
labelOptionalstringOptional label text (horizontal only).
labelAlignOptional"start" | "center" | "end"centerLabel position when label is set.