Skeleton
Skeletons are placeholders that hint at the shape of content while it loads.
Use the Skeleton component to reserve space for content that is still loading. It renders a muted block with a subtle shimmer, reducing layout shift and making loading states feel smoother.
Import
import { Skeleton } from "@puzzle-ui/ui";Basic usage
Skeleton fills the width of its container and is 1rem tall by default.
Size
Use width and height to match the content being replaced. Both accept any CSS length: numbers are treated as pixels, strings are passed as CSS values.
Radius
Use radius to match the shape of the content. The default is standard.
Composing a loading state
Combine several skeletons to mirror the layout of the final content.
API reference
Skeleton props
| Prop | Type | Default | Description |
|---|---|---|---|
width | CSSProperties["width"] | "100%" | Width of the placeholder. |
height | CSSProperties["height"] | "1rem" | Height of the placeholder. |
radius | "standard" | "full" | "none" | "standard" | Corner radius: theme radius, fully rounded, or square. |
className | string | — | Additional CSS class names. |
TypeScript types
The component exports SkeletonProps and SkeletonRadius.
Theming
Skeleton uses the --puzzle-color-border and --puzzle-color-surface-elevated tokens for its background and shimmer, and --puzzle-radius-md and --puzzle-radius-full for its corners, so it follows light, dark, and scoped themes.
Accessibility
Hidden from assistive technology
Skeleton renders an empty <span> with aria-hidden="true", so it is ignored by screen readers. Communicate the loading state separately, for example by setting aria-busy="true" on the container being loaded or by using a visually hidden status message.
Reduced motion
When the user prefers reduced motion, the shimmer animation is disabled and only the static placeholder is shown.