Shadcn.io is not affiliated with official shadcn/ui
Dotted Separator
A dotted horizontal React separator using a transparent background and border-dotted for a lightweight visual division
Use the lightest rule. This React Separator paints a dotted top border and zeros the default h-px fill so only the dots show. Built with shadcn/ui and Radix UI. Perfect for receipt-style totals, tertiary breaks, and decorative pauses.
Dotted Separator preview
Scroll to load 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.