Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Separator examples · Spacing

Inset Separator for React

A horizontal separator inset from both edges with margins and a width override.

Framework
UI library

Soften a full-bleed line. This React Separator uses mx-8 and resets its width to auto, so the default full width doesn't add to the margins and overflow its parent. Use it for list rows, nested card sections and any break that should line up with padded content.

Preview

Preview width

Section 1

Section 2

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When should I use an inset separator?

Inside padded cards, list items and sidebars, where a full-bleed line feels heavier than the content. Full width is better for page-level section breaks.

How much horizontal inset?

Match the container's padding: a card with p-6 takes mx-6, or pad the parent and leave the line at full width. mx-8 is a 32 pixel inset for wider panels.

Why does the width need an override?

The Separator is full width by default. Full width plus mx-8 overflows its parent by 64 pixels, so the example sets the width back to auto and the line fits between the margins. Use the component's orientation variant, data-horizontal:w-auto, so it replaces the default width.

Should the line align with the text?

Usually. If the content has px-6, inset the line by the same amount so both edges share one vertical axis.

Should inset change on small screens?

Use mx-4 lg:mx-8 so a phone still shows a real line; a big inset on a 320 pixel screen leaves a stub.

Can I combine inset with vertical spacing?

Yes: add my-4 next to mx-8 and the width override. Or place the line in a padded flex column with a gap and keep it at its default width.

All 20 separator examples