Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: With Margins
Next: Thick Separator

Inset Separator

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

Full-width separators feel dominant—sometimes you want subtle division. This React Separator uses mx-8 (32px horizontal margins) to create an inset effect where the separator doesn't span the full container width. Built with shadcn/ui and Radix UI, inset separators suggest subtle sectioning within a larger bounded area—perfect for list items, card sections, nested content, or any layout where full-width separators feel too strong or formal. The indentation softens visual impact.

Inset Separator preview

Scroll to load preview

Installation

Tight Spacing

Minimal space-y-1 separator spacing

Default Spacing

Standard space-y-4 separator spacing

Separator with Margins

Direct vertical margins on separator

Basic Separator

Simple full-width separator

List Item

List item with separator

Card

Card container component

FAQ

Was this page helpful?

Sign in to leave feedback.

With Margins

Separator with direct margins using my-6 applied to the separator element itself for precise spacing control built with shadcn/ui

Thick Separator

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