Skeleton
Loading placeholder that mirrors the shape of incoming content.
Preview
Installation
bash
npx shadcn@latest add @layout/skeletonUsage
tsx
import { Skeleton } from "@/components/ui/skeleton"Examples
Card skeleton
Table skeleton
Guidelines for AI agents
Match the skeleton's dimensions to the content it stands in for. Prefer skeletons over spinners when layout is known.
Never
- Nevershow skeletons for over ~5 seconds without a fallback state
Tokens consumed
--layout-accent--layout-radius