shadcn.io is an independent project built on shadcn/ui
Three bordered items each hold a title, two lines of text, and two pill tags.
Use it for job posts or articles that show an excerpt and tags. An empty result belongs in Empty, not a fake row. In Svelte, Ark UI does not supply the titles.
Installation
Anatomy
Usage
<div class="flex w-full max-w-md flex-col gap-4">{#each ITEMS as item (item)}<div class="flex flex-col gap-2 rounded-md border p-4"><Skeleton class="h-5 w-3/4" /><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-5/6" /><div class="mt-2 flex items-center gap-2"><Skeleton class="h-6 w-16 rounded-full" /><Skeleton class="h-6 w-20 rounded-full" /></div></div>{/each}</div>FAQ
How many items are in the list?
Three. ITEMS maps them into a max-w-md column with gap-4. Each item is flex flex-col gap-2 rounded-md border p-4.
What text does an item reserve?
An h-5 w-3/4 title, then h-4 w-full and h-4 w-5/6. The shorter second line reads as the end of the excerpt.
How are the tags drawn?
mt-2 flex items-center gap-2 holds h-6 w-16 rounded-full and h-6 w-20 rounded-full. rounded-full replaces the style's default radius.
Where does the item border come from?
rounded-md border p-4 is on the item div. The bars inside take bg-muted and animate-pulse from Skeleton.
API Reference
Skeleton
No extra props in this demo. The rest is on the Skeleton page.
