shadcn.io is not affiliated with official shadcn/ui
Separator examples · Styled
Dotted Separator for React
A dotted horizontal separator drawn with a top border on a transparent line.
Use the lightest rule. This React Separator draws a dotted top border, drops its fill with bg-transparent and sets its own height to zero, so only the dots show. Use it for receipt-style totals, minor breaks and decorative pauses.
Preview
Installation
FAQ
When should I use a dotted separator?
When the break should almost disappear: between a subtotal and a total, as here, or in minor subsections. Use a solid line for anything structural.
What is the difference between dotted and dashed?
Dots are round and lighter; dashes are longer and a bit heavier. Both are drawn with a border, not a background.
Can I control dot size?
Not with border-dotted, since the browser draws the dots. Use an SVG or a repeating radial gradient for a custom size or spacing.
How do I change the dot color?
Use a border color utility such as border-primary or border-muted-foreground. The fill is transparent, so bg-* classes won't tint the dots.
Related
- Dashed SeparatorA dashed horizontal separator drawn with
- Horizontal SeparatorA horizontal separator that divides a
- Gradient SeparatorA horizontal separator that fades in and
- Thick SeparatorA 4 pixel horizontal separator for major
- Standard CardA basic card with a title, a description
- Section Divider SeparatorA horizontal separator between two titled