Shadcn.io is not affiliated with official shadcn/ui
Dotted Separator
A dotted horizontal separator using border-dotted with bg-transparent for decorative or lightweight visual divisions
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.
Dotted Separator preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.