Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · separator

Native separator

An opt-in horizontal rule for native thematic breaks.

Install with npx @madojs/ui@latest add separator.

Primitive

Native separator

Deployment journal

The morning release completed without service interruption.

Later that day, the team began the next migration.

Release notes

Foundations and primitives remain backwards compatible.

Application CSS can tune spacing and line weight without changing the native thematic-break semantics.

Composition

  • Use an hr only for a real thematic break; use borders for purely visual division.

Public API

element hr
Native thematic-break semantics.
class mado-ui-separator
Opt-in horizontal separator appearance.

Detected public classes

  • .mado-ui-separator

Detected public CSS properties

  • --mado-ui-color-border
  • --mado-ui-separator-color
  • --mado-ui-separator-inline-size
  • --mado-ui-separator-margin-block
  • --mado-ui-separator-thickness
  • --mado-ui-space-5

Accessibility contract

  • The separator is meaningful structure, not a replacement for headings or spacing.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.