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 React, Base UI does not know which row will be removed.
Installation
Anatomy
Usage
<div className="flex w-full max-w-3xl flex-col gap-3">
<div className="grid grid-cols-5 gap-4 border-b pb-3">
<Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-16" />
<Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-16" />
</div>
{ROWS.map((row) => (
<div className="grid grid-cols-5 items-center gap-4" key={row}>
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
<div className="flex gap-2">
<Skeleton className="size-8 rounded-md" />
<Skeleton className="size-8 rounded-md" />
</div>
</div>
))}
</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.
