Separator

Fluent 2 visuals, shadcn APIs. Horizontal and vertical orientation, plus decorative vs. semantic examples.

Light

horizontal — between text blocks (decorative)

Fluent2 React Kit

Fluent 2 visuals, shadcn/ui APIs.

Registry

A shadcn-compatible component registry.

vertical — in a flex row (decorative, explicit height on the row)
Docs
Components
Registry
decorative vs semantic

decorative (default): role="none", purely visual, ignored by assistive tech.

the divider above carries no semantic meaning.

non-decorative: decorative={false} gives role="separator", exposed to assistive tech as a real thematic break.

the divider above is announced as a separator.

Dark

horizontal — between text blocks (decorative)

Fluent2 React Kit

Fluent 2 visuals, shadcn/ui APIs.

Registry

A shadcn-compatible component registry.

vertical — in a flex row (decorative, explicit height on the row)
Docs
Components
Registry
decorative vs semantic

decorative (default): role="none", purely visual, ignored by assistive tech.

the divider above carries no semantic meaning.

non-decorative: decorative={false} gives role="separator", exposed to assistive tech as a real thematic break.

the divider above is announced as a separator.