Skeleton
A pulsing placeholder in the shape of content that is loading, so the layout does not jump.
npx prodular-ui add skeletonList in a card
Match the real layout: same rows, same avatar size, same badge shape.
import { Card, CardContent, CardHeader } from "@/components/ui/card"import { Skeleton } from "@/components/ui/skeleton"
export default function SkeletonDefault() { return ( <Card className="w-full max-w-md" aria-busy="true" aria-label="Loading members"> <CardHeader> <Skeleton className="h-4 w-28" /> <Skeleton className="h-3.5 w-48" /> </CardHeader> <CardContent className="flex flex-col divide-y"> {[0, 1, 2].map((i) => ( <div key={i} className="flex items-center gap-3 py-3 first:pt-0 last:pb-0"> <Skeleton className="size-8 rounded-full" /> <div className="flex flex-1 flex-col gap-1.5"> <Skeleton className="h-3.5 w-32" /> <Skeleton className="h-3 w-44" /> </div> <Skeleton className="h-6 w-16 rounded-full" /> </div> ))} </CardContent> </Card> )}Anatomy
<div aria-busy="true" aria-label="Loading members"> <Skeleton className="size-8 rounded-full" /> <Skeleton className="h-4 w-32" /></div>Guidance
Use it when
- Loading content whose layout you know: lists, tables, cards, profile headers.
- First loads of a page. For refreshes, keep the old content visible.
Avoid
- Short actions like saving. Use the Button loading state.
- Skeletons for every single word. Approximate lines and blocks.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Size each Skeleton to the element it replaces: h-4 for 14px text, h-3.5 for 13px text, size-8 rounded-full for a default avatar, h-6 rounded-full for a badge.
- Set aria-busy="true" and an aria-label on the container that is loading. Skeleton itself is aria-hidden.
- Render the same number of rows the real content usually has, three to five at most.
- Do not color skeletons. They use bg-muted and stop pulsing with reduced motion.
API
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Size and shape. Default radius is rounded-md. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add skeleton# or, with the registry in components.jsonnpx shadcn@latest add @prodular/skeleton