Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Thick Separator
A thick horizontal separator using h-1 (4px) height for prominent visual division between content sections
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes subtle isn't enough—thick separators make bold statements. This React Separator uses h-1 className for 4px height creating prominent horizontal division between content. Built with shadcn/ui Separator and Radix UI primitives, thick lines provide strong visual breaks—perfect for major section divisions, chapter separators, category boundaries, footer sections, or any layout where bold visual separation emphasizes content hierarchy and importance.
Above
Below
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Horizontal Separator
Standard 1px separator
Double Line
Two parallel separators
Dashed Separator
Dashed line pattern
Section Divider
Separator between titled sections
Gradient Separator
Fade effect separator
Card
Card with section divisions