Components · v0.1 · Stable
Skeleton
A calm placeholder that suggests the shape of the content that is about to load. Uses a diagonal shimmer that falls back to a pulse for reduced motion.
Example
A card silhouette assembled from skeleton primitives.
Installation
Install and import.
npx @novix-ui/cli add skeletonimport { Skeleton } from "@novix-ui/react";When to use
Use it for
- Initial page and card loads with a stable layout
- Lists where the row count is known
- Image and avatar placeholders
Reach for something else
- Async work triggered by a user — use a Spinner or button loading state
- Sub-100ms fetches — flashing skeletons feel more distracting than no state
Playground
Playground
Shapes
Composition
Match the silhouette of the final UI. The user should read the layout during load and not be surprised when data arrives.
API
shape"rect" | "pill" | "circle" | "text""rect"Silhouette. Text collapses to line height, circle stays square.classNamestring—Size and layout via Tailwind — e.g. h-4 w-32.
Accessibility
Design guidelines
Match the final silhouette
Skeleton widths should mirror the eventual copy length. Avoid one long bar that suggests a paragraph when the payload is a title.
One motion, not many
The Nova shimmer already runs on every skeleton. Don't add per-item animation on top.
Delay by 100–200ms
Skeletons that appear for 40ms feel like flicker. Debounce the reveal.
Common mistakes
- Rendering 30 skeletons at once. The shimmer becomes a strobe. Cap at a viewport-worth.
- Using a skeleton for state changes triggered by clicks — use the button's loading state instead.
Performance notes
- The shimmer is a single CSS animation on a
::beforepseudo. No JS. - Under
prefers-reduced-motionthe shimmer stops and a subtle pulse takes over.