Skeleton

Pulse-animated placeholder for loading states — pass a `variant` and a few props to render any common shape in a single line.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/skeleton.json

Usage

Import the Skeleton component and size it to match the content it replaces.

TSImport

import { Skeleton } from "@/components/ui/skeleton";

TSExample

import { Skeleton } from "@/components/ui/skeleton"

export function Example() {
  // Single bar with width/height tokens (w-40 h-4)
  return <Skeleton width="40" height="4" />
}

// or any of the prop-driven shapes:
//   <Skeleton variant="text" lines={3} />
//   <Skeleton variant="avatar" size="10" />
//   <Skeleton variant="card" />
//   <Skeleton variant="profile" />
//   <Skeleton variant="grid" count={3} />
//   <Skeleton variant="table" rows={5} columns={4} />

Composition

Anatomy of the Skeleton primitive.

<Skeleton
  variant="block"               // block | text | avatar | card | profile | grid | table
  width="64"                    // block / card / grid card — Tailwind w token (or "100px")
  height="32"                   // block / card / grid card — Tailwind h token
  circle                        // shorthand for a round bar (uses size)
  size="10"                     // for avatar/circle — Tailwind size-N token
  lines={3}                     // for text
  count={3}                     // for grid (when rows/columns aren't set)
  rows={2} columns={4}          // for grid OR table — fixes a rows × cols matrix
  className="…"                 // forwarded to the wrapper
/>

Slot escape hatch — `SkeletonBar` is the bare animate-pulse div for fully
custom layouts:

import { SkeletonBar } from "@/components/ui/skeleton"
<SkeletonBar className="h-3 w-24" />

Reveal — `SkeletonReveal` cross-fades a skeleton into the loaded content
(transitions-dev skeleton reveal). Flip `loading` false to reveal:

import { Skeleton, SkeletonReveal } from "@/components/ui/skeleton"
<SkeletonReveal loading={loading} skeleton={<Skeleton variant="profile" />}>
  {realContent}
</SkeletonReveal>

Default block

Bare pulse bar. Pass `width` / `height` (Tailwind tokens or raw CSS) to size it.

Text lines

`variant="text"` stacks `lines` bars at staggered widths to mimic a paragraph.

Avatar (circle)

`variant="avatar"` renders a circular bar sized via the `size` prop.

Card

Card-shaped placeholder with header, text rows, and badge row inside a bordered shell.

Profile row

Avatar + name line + meta line — drop in for user-row loading states.

Card grid

Responsive 1/2/3-column grid of card placeholders. Tune density with `count`.

Table

`rows` × `columns` of bars in a bordered wrapper — matches the DataGrid loading state.

Loader + reveal

`SkeletonReveal` cross-fades the skeleton into the real content when `loading` flips false — the skeleton fades out + blurs while the content fades in + un-blurs over one motion (transitions-dev skeleton reveal). The content layer drives the height so the swap is layout-free. Press Replay to watch it again.

Ava Mitchell

Product designer

API Reference

Props exposed by the Skeleton component.

Prop	Type	Default	Description
`variant`	"block" \| "text" \| "avatar" \| "card" \| "profile" \| "grid" \| "table"	"block"	Shape preset. `block` is the bare bar; the rest compose pre-built loading layouts.
`width`	string	—	Tailwind `w` token (e.g. `"40"`, `"3/4"`) or raw CSS (`"120px"`). Used by `block`, `card`, and per-card in `grid`.
`height`	string	"4" (block) / auto (card)	Tailwind `h` token or raw CSS. Used by `block`, `card`, and per-card in `grid`.
`circle`	boolean	—	Render the `block` variant as a circle. Uses `size` for both dimensions.
`size`	string \| number	10	Tailwind `size-N` token. Used by `avatar` and `circle` block.
`lines`	number	3	Number of stacked bars rendered by `variant="text"`.
`count`	number	3	Number of card placeholders for `grid` when neither `rows` nor `columns` is set.
`rows`	number	5 (table)	Row count. Used by `table`. Also used by `grid` (with `columns`) to render an explicit `rows × columns` matrix — overrides `count`.
`columns`	number	4 (table) / 3 (grid)	Column count. Used by `table`, and by `grid` to fix the column track count (overrides the default responsive 1/2/3 breakpoints).
`className`	string	—	Class names forwarded to the outer wrapper element.