Skeleton
A placeholder block that reserves the box content will paint
Last line · animate={false}
Rows
Usage
import { Skeleton } from "@gpuixui/components/skeleton";
<Skeleton width="45%" height={14} />;
<Skeleton width={40} height={40} circle />;
<Skeleton width={120} height={20} animate={false} />;animate is the shadcn switch. Leaving it out lets the app's MotionProvider
decide; false paints one frame and schedules no timer, which is the still
image a reduced-motion preference asks for.
API
| Prop | Type | Default |
|---|---|---|
animate | boolean | the motion provider |
width | number | string | "100%" |
height | number | string | the body line height |
radius | "none" | "sm" | "md" | "lg" | "xl" | "full" | "sm" |
circle | boolean | false |
style | StyleDesc | — |
className | string | — |
testId | string | — |
ref / aria-id / onLayout | host props | — |
Theming
The block paints the theme's skeleton role, which the token contract measures
on every strip a placeholder can stand in — the page, a card, a popover and a
muted toolbar — so a switched platform style repaints it without a component
change.
Edit this page on GitHubpackages/components/docs/skeleton.mdx