Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Table

Table with Avatars Skeleton for React

A four-column table placeholder with an avatar and a name in the first column.

Framework
UI library

A loading table of people: the first cell of each row holds a small round avatar and a name bar, and three more cells follow. The rows are a four-column grid; every block is a Skeleton.

Use it for user, team or customer tables.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the table grid set up?

max-w-2xl with gap-3. The header and each row are grid grid-cols-4 gap-4. The header adds border-b pb-3. Rows add items-center.

What are the header bars?

Four h-4 bars: w-20, w-16, w-20 and w-16.

What is in the first cell?

flex items-center gap-3: a size-8 shrink-0 rounded-full circle and an h-4 flex-1 bar. size-8 is the default Avatar size. The other three cells are h-4 w-full.

How many body rows are there?

Four, from ROWS. Each row repeats the circle and the three full-width bars.

Why is the circle shrink-0?

shrink-0 keeps the size-8 circle from squeezing when the name bar is flex-1. rounded-full replaces the style's default radius.

Should these avatar rows be hidden?

Set aria-hidden on each Skeleton when nearby text already says the table is loading. The circles are decorative.

All 30 skeleton examples