Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dashed Separator
A dashed horizontal separator using border-dashed with bg-transparent for informal or temporary visual divisions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Above
Below
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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