shadcn.io is an independent project built on shadcn/ui
Four data columns, plus a last column of two small squares for edit and delete. The whole thing is a five-column grid of bars.
Use it for an admin table where every row has its own actions. Once the rows are real, those actions can live in a Dropdown Menu. In Svelte, Ark UI does not know which row will be removed.
Installation
Anatomy
Usage
<div class="flex w-full max-w-3xl flex-col gap-3"><div class="grid grid-cols-5 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" /><Skeleton class="h-4 w-16" /></div>{#each ROWS as row (row)}<div class="grid grid-cols-5 items-center 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 class="flex gap-2"><Skeleton class="size-8 rounded-md" /><Skeleton class="size-8 rounded-md" /></div></div>{/each}</div>FAQ
How many columns does this grid have?
Five. Header and rows use grid grid-cols-5 gap-4 in a max-w-3xl column with gap-3. The header adds border-b pb-3.
What widths are the header bars?
h-4 at w-20, w-24, w-16, w-20 and w-16. Body cells in the first four columns are h-4 w-full.
How many body rows are there?
Four, from ROWS. Every row repeats the same five cells, including the two action squares.
How do I match a real actions column?
Keep two size-8 squares with gap-2 in the last cell, and grid-cols-5 if the table has four data columns plus actions. The cells are Skeleton bars in a div grid, not a Table.
API Reference
Skeleton
No extra props in this demo. The rest is on the Skeleton page.
