Component · Feedback · 20
Skeleton
Skeleton = shimmer placeholders shaped like the real content, shown while data loads instead of a spinner.
What is a Skeleton?
A skeleton holds the shape of content that is coming. Name the shapes, the shimmer, and when it replaces the spinner.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- How long the toast stays before auto-dismissing, in ms or s.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- Shows progress and blocks re-click while an action runs. Disable the control and swap in a spinner.
- Say this state explicitly in the prompt.
- The invalid state — red border, message, and usually a blocked submit.
Anatomy
These are the parts to name in your prompt.
- 01 Placeholder block
- 02 Shimmer sweep
- 03 Content revealed
When to use
- Dashboards where several cards load at different times
- Feeds and lists with a stable row shape
- Any wait longer than 300ms with a known layout
Avoid when
- The wait is under 300ms — a flash of skeleton is worse than nothing
- The final layout is unknown — use a spinner
- The content is a single short string — show a dash
If the skeleton shape does not match the loaded content, the page jumps — draw the placeholder from the real layout, not from taste.
See also
Create a skeleton component.
STYLE
- placeholders in #E5E5EA at 12px radius, shaped like the real content
- a shimmer sweeps left to right in 1.2s, 8% white highlight
- text lines are 12px tall with 8px gaps, the last line is 60% width
- nothing appears before 300ms of loading
STATES
- loading with shimmer, revealing with a 160ms crossfade, error falls back
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui