shadcn.io is an independent project built on shadcn/ui
UI library: Ark UI
A header and five rows of four cells, then a footer: one bar for the page summary and five squares for the page buttons.
Use it so the pager holds its place before the rows arrive. When the pages are real, put Pagination under the table. In Svelte, Ark UI does not know how many pages there are.
Installation
Anatomy
Usage
<div class="flex w-full max-w-2xl flex-col gap-4"><div class="flex flex-col gap-3"><div class="grid grid-cols-4 gap-4 border-b pb-3"><Skeleton class="h-4 w-20" /><Skeleton class="h-4 w-24" /><Skeleton class="h-4 w-16" /><Skeleton class="h-4 w-20" /></div>{#each ROWS as row (row)}<div class="grid grid-cols-4 gap-4"><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-full" /></div>{/each}</div><div class="flex items-center justify-between border-t pt-3"><Skeleton class="h-4 w-32" /><div class="flex gap-2"><Skeleton class="size-8 rounded-md" /><Skeleton class="size-8 rounded-md" /><Skeleton class="size-8 rounded-md" /><Skeleton class="size-8 rounded-md" /><Skeleton class="size-8 rounded-md" /></div></div></div>FAQ
How is the table block built?
A max-w-2xl column with gap-4. Inside, header and rows use gap-3. Header and each row are grid grid-cols-4 gap-4, and the header adds border-b pb-3.
API Reference
Skeleton
No extra props in this demo. The rest is on the Skeleton page.
