Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Inset Separator
Inset separator with horizontal margins using mx-8 creating visual indentation for contained or nested content sections built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Section 1
Section 2
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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