Primitives
Skeleton
A pulsing placeholder for content that has not arrived
Usage
import { Skeleton, Stack } from "@gpuixui/primitives";
<Stack direction="column" gap="sm">
<Skeleton height={36} width="45%" />
<Skeleton height={14} width="70%" />
<Skeleton height={12} />
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
width | number | string | "100%" | the block's width; a side that is not a paintable length (a NaN measurement, or a stored "") takes the default, because the runtime refuses the whole style batch for a dimension it cannot parse |
height | number | string | body line height | the block's height, with the same rule for a side it cannot paint |
radius | sm | md | lg | xl | none | "sm" | corner radius; a stored name this release does not carry keeps sm |
circle | boolean | false | full radius; the missing side mirrors the other |
reducedMotion | boolean | the motion provider | paints the full-opacity frame and schedules no pulse; the prop overrides the provider |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StyleDesc | — | merged last |
ref / aria-id / onLayout | host props | none | the placeholder itself: the box a layout measures (so a placeholder can reserve exactly what it stands in for), the instance a caller holds, and the author id an automation host addresses |
testId | string | — | stable locator |
Edit this page on GitHubpackages/primitives/docs/skeleton.mdx