shadcn.io is an independent project built on shadcn/ui
Two titled sections each hold a pair of labeled fields, set off by a rule along the start edge. A button closes the form.
Use it for settings or sign-up that is grouped into parts. If people should see which step they are on, use Progress. In Svelte, Ark UI does not build the real fields.
Installation
Anatomy
Usage
<div class="flex w-full max-w-lg flex-col gap-8"><div class="flex flex-col gap-4"><Skeleton class="h-5 w-40" /><div class="flex flex-col gap-4 border-s-2 ps-4"><div class="flex flex-col gap-2"><Skeleton class="h-4 w-20" /><Skeleton class="h-10 w-full" /></div><div class="flex flex-col gap-2"><Skeleton class="h-4 w-24" /><Skeleton class="h-10 w-full" /></div></div></div><div class="flex flex-col gap-4"><Skeleton class="h-5 w-32" /><div class="flex flex-col gap-4 border-s-2 ps-4"><div class="flex flex-col gap-2"><Skeleton class="h-4 w-16" /><Skeleton class="h-10 w-full" /></div><div class="flex flex-col gap-2"><Skeleton class="h-4 w-20" /><Skeleton class="h-10 w-full" /></div></div></div><Skeleton class="h-10 w-32" /></div>FAQ
How are the two sections stacked?
A max-w-lg column with gap-8. Each section is a gap-4 column: an h-5 title, then the fields. A h-10 w-32 button sits under both sections.
What is the line along the fields?
border-s-2 ps-4 on the field stack. The rule sits on the start edge, and ps-4 insets the fields. Titles are h-5 w-40 and h-5 w-32, outside that border.
What is inside a section?
Two fields, each flex flex-col gap-2. Labels are h-4 at w-20, w-24, w-16 and w-20. Every control is h-10 w-full. The sections stack those fields with gap-4.
API Reference
Skeleton
No extra props in this demo. The rest is on the Skeleton page.
