shadcn.io is an independent project built on shadcn/ui
A large avatar sits beside three lines, then three bordered boxes for stats, then a button across the card. The border is on the box, not on the bar.
Use it when a profile leads with its counts. If one number is updating and the layout is already there, a Spinner in that box is enough. In Svelte, Ark UI does not calculate the stats.
Installation
Anatomy
Usage
<div class="flex w-full max-w-md flex-col gap-6 rounded-md border p-6"><div class="flex items-start gap-4"><Skeleton class="size-20 shrink-0 rounded-full" /><div class="flex flex-1 flex-col gap-2"><Skeleton class="h-6 w-40" /><Skeleton class="h-4 w-32" /><Skeleton class="h-4 w-48" /></div></div><div class="grid grid-cols-3 gap-4"><div class="flex flex-col items-center gap-2 rounded-md border p-3"><Skeleton class="h-8 w-16" /><Skeleton class="h-3 w-12" /></div><div class="flex flex-col items-center gap-2 rounded-md border p-3"><Skeleton class="h-8 w-16" /><Skeleton class="h-3 w-12" /></div><div class="flex flex-col items-center gap-2 rounded-md border p-3"><Skeleton class="h-8 w-16" /><Skeleton class="h-3 w-12" /></div></div><Skeleton class="h-10 w-full" /></div>FAQ
What wraps this profile?
flex w-full max-w-md flex-col gap-6 rounded-md border p-6. A header, three stat boxes, then a button.
How is the header aligned?
flex items-start gap-4. The circle is size-20 shrink-0 rounded-full. Beside it, gap-2 stacks h-6 w-40, h-4 w-32 and h-4 w-48.
How are the stat boxes built?
grid grid-cols-3 gap-4. Each box is flex flex-col items-center gap-2 rounded-md border p-3, with h-8 w-16 over h-3 w-12.
API Reference
Skeleton
No extra props in this demo. The rest is on the Skeleton page.
