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

SkeletonStat

v1.0.2Updated 20 Jul 2026

A placeholder for a KPI tile: a small label bar, a large metric-value bar and a sparkline block, inside a bordered card. Built for the metrics strip at the top of a dashboard, where four tiles usually load together. Carries role="status" and aria-busy.

View source← Back to catalog

Preview

Live · 6 stories
DefaultOpen ↗
▸Why this is recommendedloadingplaceholderstatkpi+4

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

Recommended for+14
  • ✓Dashboard KPI strip while metrics load
  • ✓Analytics summary tiles on first paint
  • ✓Revenue or count cards waiting on a query
  • ✓Report header stats during initial fetch
  • ✓Metric tiles above a loading chart
Tags+6
loadingplaceholderstatkpimetricdashboardskeletondefault
Features+4
  • Label + big value + sparkline composition
  • Bordered bg-card surface matching a real stat tile
  • role="status" + aria-busy with an sr-only "Loading…" label
  • Forwards animation and intensity to every bar
  • Tiles evenly in a grid with no extra wrapper
  • i18n: labels prop overrides the sr-only "Loading…" announcement
Not recommended for−2
  • ✕General content cards (use SkeletonCard)
  • ✕Tabular data (use SkeletonTable)
  • ✕The chart body itself (use Skeleton with a chart-sized className)

Install

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

get_registry_item({ name: "SkeletonStat" })

Usage

import { SkeletonStat } from '@/components/primitives/skeleton/skeleton-stat';

<div className="grid grid-cols-4 gap-4">
  {[0, 1, 2, 3].map((i) => <SkeletonStat key={i} animation="wave" />)}
</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 applied to every bar. Defaults to 'pulse'.

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

Placeholder contrast against the surface.

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

Overrides on the tile wrapper.

string—
labels

Override the built-in sr-only "Loading…" announcement (i18n). Merged over DEFAULT_SKELETON_STAT_LABELS.

Partial<SkeletonStatLabels>—

Related

Platform docsAll componentsSource files