Dividers & Spacers

divider and spacer are the only components with no content of their own. They exist to separate what is around them — one draws a line, the other reserves space. Both accept props and children and nothing else: no content, no dataSource, no responsive, no visibility, no i18n.

components:
  - { type: text, tag: h2, content: 'Personal details' }
  - { type: spacer, props: { size: lg } }
  - { type: divider, props: { style: dashed, label: 'or' } }
  - { type: spacer, props: { size: lg } }
  - { type: text, tag: h2, content: 'Company details' }

divider

A rule between sections, prestyled with the theme's border tone.

Property	Description
props.style	Line style: solid (default), dashed, or dotted.
props.label	Text set into the middle of the rule.
props.className	Tailwind classes, appended after the prestyle so they win the cascade.

style is applied as an inline border-style rather than a class, so it is unaffected by the token cascade. Any value other than dashed or dotted falls back to solid — a typo produces a plain rule, not an error.

Labelled dividers

Supplying label changes the markup. Instead of a bare <hr>, the divider becomes a flex container with role="separator" and aria-label set to the label, holding two rules with the text between them:

- { type: divider, props: { label: 'or continue with', style: solid } }

The label renders in the muted foreground tone, so a labelled separator reads as passive chrome rather than as a heading. Because the accessible name comes from aria-label, assistive technology announces the separator once — it does not read the visible text a second time.

spacer

Vertical whitespace, sized from a preset. Renders an aria-hidden element, so it adds rhythm without adding anything to the accessibility tree.

props.size	Height	Typical use
sm	0.5rem	Between tightly related rows.
md	1.5rem	The default — between sibling blocks.
lg	3rem	Between subsections.
xl	5rem	Between major page sections.

An unrecognised size falls back to md. A props.className you supply is appended after the height class, so className: 'h-40' overrides the preset outright.

Related Pages

• Layout Components — the containers these sit between.
• The Component Model — why these two accept so few modules.
• Content Components — the text they separate.
• Theme — the border and muted tones the divider uses.