shadcn.io is an independent project built on shadcn/ui
Profile, with Name, email, and public bio., sits above a horizontal line. Preferences, with Theme, language, and notifications., sits below it.
Use one line when two sections share a canvas. Give each section a Card when they should read as separate objects. In Svelte, Ark UI draws the line and not the space around it.
Installation
Anatomy
Usage
<div class="flex w-full max-w-sm flex-col gap-6"><div class="flex flex-col gap-1"><h3 class="font-medium text-sm">Profile</h3><p class="text-muted-foreground text-sm">Name, email, and public bio.</p></div><Separator /><div class="flex flex-col gap-1"><h3 class="font-medium text-sm">Preferences</h3><p class="text-muted-foreground text-sm">Theme, language, and notifications.</p></div></div>FAQ
When should I use separators between sections instead of cards?
Use a line when the sections belong to one page or form. Use Cards when each block stands on its own, something people open or rearrange. Lines keep a continuous reading flow; cards add weight and isolation.
How much space should sit between titled sections?
gap-6 or gap-8 around the line, with a tight gap-1 inside each heading and description pair, as here. Loose between sections and tight within them is what makes the line read as a section break.
Should the heading come before or after the separator?
Section, line, next heading. A line directly above a title reads as a rule over the heading rather than a break between sections.
Should section separators look different from list separators?
Keep the same one-pixel line in the border color. The hierarchy comes from spacing and headings, not a thicker line; save thick or double lines for rare formal breaks.
API Reference
Separator
No extra props in this demo. The rest is on the Separator page.
