Skeleton
Reserve space while content is still loading.
pnpm dlx shadcn@latest add @uiarc/skeletonLive · keyboard ready
- Loading states for content whose shape is known, like a profile or comment.
- Swapping a placeholder into real content with a crossfade and height spring.
- Use progress when you can report a percentage.
- Use empty-state when loading finished and there is nothing to show.
- Use text-shimmer for an AI thinking or status line.
Installation
Add Skeleton with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/skeletonAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Skeleton } from "@/registry/components/skeleton/skeleton"; export function Profile({ user }: { user?: User }) { return ( <Skeleton avatar lines={2} loading={!user}> {user && <ProfileCard user={user} />} </Skeleton> );}Skeleton
A pulsing placeholder of text lines and an optional avatar that can crossfade into the loaded content.
PropTypeDefaultDescription
labelstring"Loading content"aria-label of the loading status.linesnumber3Number of text lines, clamped to 1-6.avatarbooleanfalseAdds a round avatar placeholder.childrenReactNode–Content to reveal once loading finishes. With children the placeholder crossfades into them.loadingbooleantrueKeeps the placeholder visible while true. Only used with children.classNamestring–Class on the outer element.- The placeholder is role="status" with aria-busy and an aria-label; its shapes are aria-hidden.
- With children, the wrapper sets aria-busy while loading.
- Blocks pulse in a staggered wave, each a beat after the one above.
- On load the placeholder fades out, content rises 4px into place, and the height springs from placeholder to content.
- Reduced motion stops the pulse and swaps with short fades and no height animation.
- Lines are percentages of the container width, so the placeholder scales with its slot.
- It only draws text lines and an avatar; build custom shapes for grids or media.
- The pulse is a CSS animation that stops under reduced motion.
- A ResizeObserver springs the height from placeholder to content; avoid hundreds of skeletons at once.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use while fetching content whose shape is known. Use progress when you can report a percentage, and empty-state when there is nothing to show.
- Wrap the real content as children and drive loading to get the crossfade; without children it renders only the placeholder.
The full library index for assistants is at /llms.txt.