shadcn.io is an independent project built on shadcn/ui
A long article shape: a title and a subtitle, a tall hero, two sections that each start with a heading, and a second image lower down.
Use it for a guide whose sections you can already sketch. When you cannot predict that shape, a Spinner is enough. In Svelte, Ark UI does not fetch those sections.
Installation
Anatomy
Usage
<div class="flex w-full max-w-3xl flex-col gap-8"><div class="flex flex-col gap-4"><Skeleton class="h-8 w-3/4" /><Skeleton class="h-4 w-1/2" /></div><Skeleton class="h-96 w-full" /><div class="flex flex-col gap-6"><div class="flex flex-col gap-3"><Skeleton class="h-6 w-48" /><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-5/6" /></div><div class="flex flex-col gap-3"><Skeleton class="h-6 w-40" /><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-4/6" /></div><Skeleton class="h-48 w-full" /></div></div>FAQ
How is the article column spaced?
flex w-full max-w-3xl flex-col gap-8. A header group, an h-96 image, then a gap-6 stack of two sections and a second image.
How does a section differ from a paragraph?
Each section starts with an h-6 heading, w-48 then w-40, above h-4 lines in a gap-3 column. The first section ends on w-5/6. The second ends on w-4/6.
What sizes are the two images?
The hero is h-96 w-full. The later image is h-48 w-full, inside the gap-6 stack. Match both heights to the images you render.
API Reference
Skeleton
No extra props in this demo. The rest is on the Skeleton page.
