Shadcn.io is not affiliated with official shadcn/ui
Dashed Separator
A dashed horizontal separator using border-dashed with bg-transparent for informal or temporary visual divisions
Dashed lines feel less permanent—perfect for softer boundaries. This React Separator uses border-t border-dashed bg-transparent creating dashed horizontal division between content. Built with shadcn/ui Separator and Radix UI primitives, dashed lines provide informal separation—perfect for draft sections, temporary boundaries, optional content divisions, suggested groupings, or any layout where softer visual separation feels more appropriate than solid lines.
Dashed Separator preview
Installation
Related Components
Dotted Separator
Dotted line pattern
Horizontal Separator
Solid line separator
Thick Separator
Bold 4px separator
Gradient Separator
Fade effect separator
Card
Card with borders
Section Divider
Separator between sections
FAQ
Was this page helpful?
Sign in to leave feedback.