FX · Feedback

A loading placeholder with a soft shimmer.

Loading profile
bash
npx shadcn@latest add https://www.rad-ui.com/r/skeleton.json
React
import Skeleton from "@/components/fx/skeleton" {loading ? <Skeleton label="Loading profile" avatar /> : <Profile />}
  • One role="status" message ("Loading") instead of a pile of empty boxes; the shapes are aria-hidden.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) keeps the placeholder still.
PropTypeDefaultDescription
label
string
'Loading'

Announced to screen readers.

avatar
boolean
false

Show an avatar circle.

lines
number
3

Number of text lines.