Make your AI a shadcn expert
Previous: Gradient Separator
Next: Thick Separator

Double Line

Two parallel horizontal React separators with a tight gap for a formal double-rule division

Stack two rules for a formal break. This pattern places two shadcn/ui Separators in a gap-1 column so they read as one double line, not two unrelated breaks. Built with Radix UI. Perfect for certificates, legal blocks, and premium footers.

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 React separator that keeps the shadcn/ui Separator primitive and fades the fill from transparent through the border token

Thick Separator

A thick horizontal React separator that overrides the primitive h-px rule with data-orientation height for a 4px break

Get Pro — Save 33%·--:--:--→