Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dotted Separator
A dotted horizontal separator using border-dotted with bg-transparent for decorative or lightweight visual divisions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Dots are gentler than dashes—perfect for subtle boundaries. This React Separator uses border-t border-dotted bg-transparent creating dotted horizontal division between content. Built with shadcn/ui Separator and Radix UI primitives, dotted lines provide decorative separation—perfect for lightweight divisions, decorative accents, receipt-style layouts, tear-off sections, or any layout where minimal visual weight creates organization without strong boundaries.
Above
Below
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Dashed Separator
Dashed line pattern
Horizontal Separator
Solid line separator
Gradient Separator
Fade effect separator
Thick Separator
Bold 4px separator
Card
Card component
Section Divider
Section boundaries