Search

Search components and blocks

Sign in

Skeleton

Open page

A shimmer sweep instead of a flat pulse — the loading affordance that reads as premium instead of merely 'not broken.' Pure CSS, no JS animation loop.

pnpm dlx shadcn@latest add @ditherui/skeleton

Install

$ pnpm dlx shadcn@latest add @ditherui/skeleton

Props

animatedbooleantrue
classNamestring—

Skeleton on load

ProOpen page

Shows the skeleton on first render and on every reload, then crossfades into the real content.

pnpm dlx shadcn@latest add @ditherui/skeleton-reload-card

Props

When to use the skeleton

Use skeletons as loading placeholders. It is a shimmer sweep instead of a flat pulse, in pure CSS.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components