Skeleton
Loading state placeholder component with pulse animation.
The Skeleton primitive renders pulsing placeholder shapes to represent content blocks (such as text headings, media cards, or profile photos) while resources are being fetched.
Quick Start
Simulate the loading state of a user profile card:
tsx
import { Skeleton } from 'boltdocs/primitives'
export default function ProfileLoadingCard() {
return (
<div className="flex items-center gap-4 p-4 border border-subtle rounded-xl max-w-sm">
{/* 1. Circular skeleton for profile photo */}
<Skeleton variant="circle" className="size-12 shrink-0" />
{/* 2. Rect text placeholders */}
<div className="flex-1 flex flex-col gap-2">
<Skeleton variant="rect" className="h-4 w-2/3" />
<Skeleton variant="rect" className="h-3 w-1/2" />
</div>
</div>
)
}
Component Props
The Skeleton component accepts standard HTML div element props plus:
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'rect' | 'circle' | 'rect' | Shape structure style. Renders rounded-full for 'circle' and rounded-md for 'rect'. |
className | string | undefined | Custom utility CSS class overrides (e.g., mapping dimensions like w-full h-8). |
style | CSSProperties | undefined | Inline style settings. |
Customization & states
Skeleton is a presentational placeholder with no state and no data-* attributes. Its only baked-in visuals are a soft bg-soft fill, a pulse animation (animate-pulse), and the shape chosen by variant — everything else (size, color, radius, duration) comes from the theme via className, which can also override or disable the defaults.
| State / Slot | Mechanism |
|---|---|
className | Passthrough; theme controls size, color, radius, and animation overrides |
variant | rect → rounded-md, circle → rounded-full |
animate-pulse | Baked-in pulse animation; override with animate-none or your own animate-* |
bg-soft | Base fill color; override with any bg-* utility |
| No state | No interaction or data-* attributes |
Tailwind v4:
tsx
<Skeleton variant="rect" className="h-4 w-2/3 rounded-md bg-muted/20" />
<Skeleton variant="circle" className="size-12 rounded-full animate-none" />
Last updated on October 18, 2026
