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

SkeletonRow

v1.0.2Updated 20 Jul 2026

A placeholder for a single list item: circular avatar, a title and subtitle stack, and a right-hand action button. Stack several to hold the shape of a people or conversation list while it loads. Carries role="status" and aria-busy for assistive tech.

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendedloadingplaceholderrowlist+3

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

Recommended for+14
  • ✓Contact list while people load
  • ✓Inbox or conversation list on first paint
  • ✓Team member list during initial fetch
  • ✓Notification list waiting on a response
  • ✓Any avatar-plus-label row that has not loaded
Tags+6
loadingplaceholderrowlistlist-itemskeletondefault
Features+4
  • Avatar + two-line text stack + trailing action
  • Flexes to the full width of its container
  • role="status" + aria-busy with an sr-only "Loading…" label
  • Forwards animation and intensity to every part
  • Stacks cleanly into a list with a gap wrapper
  • i18n: labels prop overrides the sr-only "Loading…" announcement
Not recommended for−2
  • ✕Multi-column tabular data (use SkeletonTable)
  • ✕Card-shaped content (use SkeletonCard)
  • ✕A bare avatar with no text (use SkeletonAvatar)

Install

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

get_registry_item({ name: "SkeletonRow" })

Usage

import { SkeletonRow } from '@/components/primitives/skeleton/skeleton-row';

<div className="flex flex-col gap-4">
  {[0, 1, 2, 3].map((i) => <SkeletonRow key={i} />)}
</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 row wrapper.

string—
labels

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

Partial<SkeletonRowLabels>—

Related

Platform docsAll componentsSource files