Skeleton

Use to show a placeholder while content is loading.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/skeleton.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Text Lines

Card Skeleton

Full Card Loading

Avatar + List

Usage

How to use this component in your code.

{/* Text lines */}
<Skeleton className="h-4 w-[250px]" />

{/* Avatar placeholder */}
<Skeleton className="h-12 w-12 rounded-none" />

{/* Card loading */}
<Card>
  <CardHeader><Skeleton className="h-5 w-[180px]" /></CardHeader>
  <CardContent><Skeleton className="h-4 w-full" /></CardContent>
</Card>