Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Separator - Double Line
Two parallel horizontal separators with space-y-1 gap for elegant, formal, or traditional visual divisions with sophisticated appearance
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Double lines signal formality—think certificates, legal documents, or premium branding. This React pattern stacks two shadcn/ui Separators with space-y-1 gap creating elegant double-line division. Built with Radix UI primitives, the parallel lines provide sophisticated separation—perfect for formal documents, certificates, award layouts, luxury branding, footer sections, or any design where traditional elegance and visual refinement matter more than minimalism.
Above
Below
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Thick Separator
Bold 4px single line separator
Horizontal Separator
Standard single line separator
Gradient Separator
Fade effect separator
Dashed Separator
Dashed line pattern
Section Divider
Separator between sections
Card
Card with borders
Questions you might have
React Gradient Separator
A gradient fade separator using bg-gradient-to-r from transparent via border to transparent for elegant soft-edge divisions
React Separator - With Text Center
Separator with centered text label between two symmetric separator lines for OR dividers in authentication forms built with shadcn/ui