Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Gradient Separator
Next: With Text Center

Double Line

Two parallel horizontal separators with space-y-1 gap for elegant, formal, or traditional visual divisions with sophisticated appearance

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.

Double Line preview

Scroll to load preview

Installation

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

FAQ

Was this page helpful?

Sign in to leave feedback.

Gradient Separator

A gradient fade separator using bg-gradient-to-r from transparent via border to transparent for elegant soft-edge divisions

With Text Center

Separator with centered text label between two symmetric separator lines for OR dividers in authentication forms built with shadcn/ui