Search

Search components and blocks

Sign in

Skeleton

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—

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