Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Inset Separator
Next: Dashed Separator

Thick Separator

A thick horizontal separator using h-1 (4px) height for prominent visual division between content sections

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.

Thick Separator preview

Scroll to load preview

Installation

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

FAQ

Was this page helpful?

Sign in to leave feedback.

Inset Separator

Inset separator with horizontal margins using mx-8 creating visual indentation for contained or nested content sections built with shadcn/ui

Dashed Separator

A dashed horizontal separator using border-dashed with bg-transparent for informal or temporary visual divisions