Skeleton

Default

Skeleton renders a single shimmer placeholder block. Control the shape and size through style or className.

Card Grid

Combine multiple Skeleton blocks to mirror a card-grid loading state. The thumbnail height and text line widths approximate the content shape.

List Rows

SkeletonList renders count placeholder rows with an avatar circle, two text lines, and a badge pill — matching the anatomy of a people-list or activity-feed loading state.

Table Rows

SkeletonTable renders rows × columns cell placeholders for data-table loading states. Column widths vary so the skeleton reads as a real table rather than a uniform grid.

Detail / Profile

SkeletonDetail renders a large avatar block, a heading-height line, and lines body-text placeholders — matching a profile or detail-panel loading state.

Installation

npx visor add skeleton

This copies two files into your project:

• components/ui/skeleton/skeleton.tsx — the component
• components/ui/skeleton/skeleton.module.css — the styles

Usage

import { Skeleton, SkeletonList, SkeletonTable, SkeletonDetail } from '@/components/ui/skeleton/skeleton';

// Single block
<Skeleton style={{ height: '1rem', width: '12rem' }} />

// List rows
<SkeletonList count={5} />

// Table rows
<SkeletonTable rows={6} columns={3} />

// Detail / profile
<SkeletonDetail lines={4} />

Composition Notes

• Skeleton fills the exact bounding box of its container — size it with style or className so there is no layout reflow when real content replaces it.
• Use aria-hidden="true" on individual Skeleton blocks when a parent role="status" carries the accessible label. SkeletonList, SkeletonTable, and SkeletonDetail already include role="status" and aria-label.
• Never render skeletons for a confirmed empty collection — use the EmptyState component instead.
• Real content should fade in over 200 ms (transition: opacity 200ms ease-out) to avoid a jarring swap.

API Reference

Skeleton

No props data available for “skeleton”.

The component also accepts all standard <div> HTML attributes.

SkeletonList

Also accepts all standard <div> HTML attributes.

SkeletonTable

Also accepts all standard <div> HTML attributes.

SkeletonDetail

Also accepts all standard <div> HTML attributes.