Skeleton
Placeholders shown while content loads. Rectangle, square, circle and line in the Figma sizes.
Version 0.2.0 ·
Installation
bunx --bun shadcn@latest add @dga/skeletonUsage
import { Skeleton } from "@/components/ui/skeleton";
<div aria-busy="true" aria-live="polite">
<Skeleton shape="circle" size={48} />
<Skeleton shape="line" size="lg" />
</div>A skeleton shows the shape of content while it loads, so the page does not jump when it arrives. Set widths with className (for example w-32).
Examples
Layouts
The five Figma Skeleton Components, built from the primitive. Copy them as a starting point.
RTL
Layouts follow the reading direction: the avatar sits at the start.
Accessibility
- Skeletons are hidden from screen readers. Set
aria-busy="true"on the region that is loading, and remove it when the content arrives. - The pulse stops with reduced motion.
API Reference
Skeleton
A placeholder shown while content loads. Hidden from screen readers: set aria-busy="true" on the region that is loading instead.
| Prop | Type | Default |
|---|---|---|
"rectangle" | "line" | "square" | "circle"Shape of the placeholder. | "rectangle" | |
| ||
"sm" | "md" | "lg" | 24 | 48 | 64 | 80 | 120 | 170 | 240Figma size. Omit it and size the skeleton with `className`. | No default | |
| ||
Also accepts the props of the element it renders.
Deviations from DGA
| Change | Reason |
|---|---|
--skeleton-background (new) | Placeholder fill: neutral-200, neutral-700 in dark mode. |
Skeleton: composite types | The composites are layouts of the primitives; real pages need their own shapes. |
Skeleton: animation | A gentle pulse shows that content is loading. prefers-reduced-motion turns it off. |
Contrast
No contrast pairs: this component is decorative. Content that carries meaning must not rely on it (WCAG 1.4.11 applies only to graphics needed to understand the content).