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 React, Ark UI draws the line and not the space around it.
Installation
Anatomy
Usage
<div className="flex w-full max-w-sm flex-col gap-6">
<div className="flex flex-col gap-1">
<h3 className="font-medium text-sm">Profile</h3>
<p className="text-muted-foreground text-sm">
Name, email, and public bio.
</p>
</div>
<Separator />
<div className="flex flex-col gap-1">
<h3 className="font-medium text-sm">Preferences</h3>
<p className="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.
