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

SkeletonCard

v1.0.2Updated 20 Jul 2026

A ready-made placeholder for a content card: title bar, a two-line body and a footer holding a meta label and a pill. Comes wrapped in a bordered card surface with role="status" and aria-busy so assistive tech announces the loading state. Drop it straight into a card grid while the list request is in flight.

View source← Back to catalog

Preview

Live · 7 stories
DefaultOpen ↗
▸Why this is recommendedloadingplaceholdercardgrid+2

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

Recommended for+14
  • ✓Card grid while a list of items loads
  • ✓Blog post previews during initial fetch
  • ✓Product tiles waiting on a search response
  • ✓Dashboard content panels before data arrives
  • ✓Feed of article cards on first paint
Tags+6
loadingplaceholdercardgridskeletondefault
Features+4
  • Pre-composed title + 2-line body + footer chip
  • Bordered bg-card surface matching the real card
  • role="status" + aria-busy with an sr-only "Loading…" label
  • Forwards animation and intensity to every bar
  • Drops into a grid with no extra wrapper
  • i18n: labels prop overrides the sr-only "Loading…" announcement
Not recommended for−2
  • ✕Tabular data (use SkeletonTable)
  • ✕KPI number tiles (use SkeletonStat)
  • ✕A flat list item with an avatar (use SkeletonRow)

Install

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

get_registry_item({ name: "SkeletonCard" })

Usage

import { SkeletonCard } from '@/components/primitives/skeleton/skeleton-card';

<div className="grid grid-cols-3 gap-4">
  {isLoading && [0, 1, 2].map((i) => <SkeletonCard 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 card wrapper.

string—
labels

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

Partial<SkeletonCardLabels>—

Related

Platform docsAll componentsSource files