Skeleton

A flexible placeholder for cards, avatars, media, and custom layouts.

Width180pxHeight72pxCorner radius8pxActive animation

Installation

pnpm dlx shadcn@latest add https://loading.design/r/skeleton.json

1import { Skeleton } from "@/components/loading/skeleton"2
3<Skeleton width={"100%"} height={20} radius={8} animated={true} />

Prop	Type	Default	Description
width	string	100%	Placeholder width as a CSS length or percentage.
height	number	20	Placeholder height in pixels.
radius	number	8	Corner radius in pixels. Use a large value for a pill or circle.
animated	boolean	true	Whether to apply a subtle opacity pulse.

The skeleton is hidden from assistive technology. Apply aria-busy to the region it represents and retain a stable accessible name for that region.