shadcn.io is an independent project built on shadcn/ui
Features sits above a horizontal line, and Testimonials sits below it. The gap on each side is 32 pixels, so the line reads as a chapter break.
Use the wide gap for major sections on a marketing page. Tabs fit better when people should switch sections instead of scrolling past a line. 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-8"><p class="text-sm">Features</p><Separator /><p class="text-sm">Testimonials</p></div>FAQ
When should I use wide spacing?
Between major page regions, such as Features and Testimonials, or chapters of an article. If people have to scroll past an empty band to reach the next related paragraph, the gap is too wide.
Can spacing be too wide?
Yes. gap-8 is a generous section break; from gap-12 up, related content starts to look disconnected. Keep that for large landing pages.
Does wide spacing improve hierarchy?
Yes, together with headings. The whitespace is the pause and the line is the period, but neither replaces a real heading.
API Reference
Separator
No extra props in this demo. The rest is on the Separator page.
