build69
Sign inGet API key
build69  /  Components  /  Feedback & Status  /  Skeleton

Skeleton

v1.0.2Updated 20 Jul 2026

Animated grey placeholder block. Use during data loading to preserve layout. Ships pre-baked shapes (Avatar / Text / Card / Row / Table / Form / Stat / Chat) plus pulse or shimmer wave animation.

View source← Back to catalog

Preview

Live · 15 stories
DefaultOpen ↗
▸Why this is recommendedloadingplaceholdershimmerwave+3

The default, out-of-the-box Skeleton.

Recommended for+14
  • ✓Holding layout while data loads
  • ✓Building a custom loading shape none of the presets cover
  • ✓Placeholder bars for a page heading and subtitle
  • ✓Initial paint placeholder for a known layout
  • ✓Replacing a spinner with a content-shaped loading state
Tags+6
loadingplaceholdershimmerwavepulseskeletondefault
Features+4
  • Animation: pulse / wave / none
  • Intensity: subtle / default / strong
  • Sized entirely via className or style
  • Wave shimmer keyframes injected on demand
  • Respects prefers-reduced-motion
  • aria-hidden so screen readers skip the decoration
  • Composable into any custom loading layout
Not recommended for−2
  • ✕Indeterminate progress (use Progress)
  • ✕Already-loaded empty states (use EmptyState)
  • ✕Blocking full-page waits (use SpinnerOverlay)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Skeleton" })

Usage

import { Skeleton } from '@/components/primitives/skeleton/skeleton';

<div className="flex flex-col gap-2">
  <Skeleton className="h-6 w-48" />
  <Skeleton className="h-3 w-72" intensity="subtle" />
</div>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
animation

Shimmer style. Defaults to 'pulse'.

'pulse' | 'wave' | 'none'—
intensity

Placeholder contrast against the surface. Defaults to 'default'.

'subtle' | 'default' | 'strong'—
className

Sizing and shape (height, width, rounding).

string—

Related

Platform docsAll componentsSource files