Separator Samples
Probably my favourite component
Vertical/HorizontalLabels
Separator — Horizontal
Uses orientation="horizontal" (default) with full width.
Shadcn/ui Separator is a thin rule used to group and divide content.
It supports horizontal and vertical orientations and can be marked decorative.
When decorative is false, assistive tech announces it as a landmark separator.
Separator — Vertical in a Toolbar
Uses orientation="vertical" to divide actions.
Separator — With Center Label (composed)
Separator itself has no label prop; compose it with text for sections.
Account
Email: user@example.com
Plan: Pro
Preferences
Theme: System
Language: English
Time zone: IST
Above separator sets "decorative=" so assistive tech can announce it.