Separator

Visually or semantically separates content.

$bunx shadcn@latest add @nx-ui/separator
Registry item
Installs withutils
Used byai-checkpointbutton-groupdata-tablefieldisochrone-toolitemmap-toolbarroute-toolsettingssidebar

Horizontal

The default orientation — a full-width rule dividing stacked content.

Hollowfield Reclamation Trust

Registered charity · soil remediation

ProjectsMembersReports

Vertical

Set orientation="vertical" for a rule between inline items; the separator stretches to fill its cross axis, so give the row a fixed height.

Compost yardAnaerobic digesterBulk skip hire

Decorative vs semantic

Decorative (the default) is hidden from assistive tech; set aria-hidden={false} when the rule marks an actual thematic break in content, not just a visual divide.

Decorative — purely visual, ignored by screen readers:

Semantic — announced as a thematic break:

In a composition

ItemSeparator (built on Separator) dividing a group of collection sites awaiting inspection.

Northgate Materials Recovery

Mixed recyclables · last audited 14 May

Compliant
Fenwick Road Transfer Station

General waste · inspection due in 3 days

Review
Alder Community Composting

Organic waste · overdue since 2 July

Overdue

API reference

Exported parts and their props, extracted from the component source.

…extends SeparatorPrimitive.Props