shadcn.io is not affiliated with official shadcn/ui
Separator examples · Styled
Thick Separator for React
A 4 pixel horizontal separator for major breaks such as a new chapter.
Make a major break read as major. This React Separator overrides its one-pixel height with a 4 pixel one, using the same orientation variant as the component so the new height wins. Use it for chapter breaks, category boundaries and footer rules.
Preview
Installation
FAQ
When should I use a thick separator?
For a rare, important break: a new chapter, a new settings category. Don't thicken every line or the page turns into stripes.
Why not just pass className h-1?
The component sets its height with an orientation variant, which comes after a plain h-1 in the stylesheet, so the line would stay one pixel. Use the same variant and the merge replaces the default height.
Here that's data-horizontal:h-1.
Should thick separators use a different color?
Usually not: the thickness is the emphasis. A brand color can work for one special break, not for every section.
Does a thick line need more space around it?
Yes. Pair it with gap-6 or gap-8, as here, so the line doesn't sit on the text.
Related
- Horizontal SeparatorA horizontal separator that divides a
- Double Line SeparatorTwo parallel horizontal separators with a
- Dashed SeparatorA dashed horizontal separator drawn with
- Section Divider SeparatorA horizontal separator between two titled
- Gradient SeparatorA horizontal separator that fades in and
- Standard CardA basic card with a title, a description