Make your AI a shadcn expert
Previous: Vertical Separator
Next: Default Spacing

Inset Separator

Inset React separator with horizontal margins and a width override so the line stays inside the parent instead of overflowing

Soften a full-bleed rule. This React Separator uses mx-8 plus data-[orientation=horizontal]:w-auto so the default w-full does not add to the margins and overflow the card. Built with shadcn/ui and Radix UI. Perfect for list rows, nested card sections, and any break that should align with padded content.

Inset Separator preview

Scroll to load preview

Installation

Tight Spacing

Minimal gap-1 separator spacing

Default Spacing

Standard gap-4 separator spacing

Separator with Margins

Direct vertical margins on separator

Horizontal Separator

Simple full-width separator

List Separator

List rows with separators

Card

Card container component

FAQ

Was this page helpful?

Sign in to leave feedback.

Vertical Separator

A vertical React separator between inline items using orientation vertical, a fixed parent height, and Tailwind gap for Next.js toolbars

Default Spacing

Separator with default flex gap-4 spacing for balanced React layouts that need comfortable breathing room between sections

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