Skeleton

Installation

The component is exported from @by/experience-system. Add the package with your package manager:

pnpm add @by/experience-system

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.

Composition

Use one or more Skeleton blocks inside your layout; there is no nested part API:

Skeleton
Skeleton …

Usage

import { Skeleton } from '@by/experience-system';

Skeleton is a client component ('use client' in the package). Use it inside a Client Component or a dynamic import when using the Next.js App Router.

<div className="flex items-center gap-4">
  <Skeleton className="size-10 shrink-0 rounded-full" />
  <Skeleton className="h-4 w-48 rounded-sm" />
</div>

Examples

Text lines

Stacked bars with varied widths for paragraph placeholders.

Card

Card header and media-shaped blocks inside CardHeader / CardContent.

Form

Label-sized and field-sized rows for a simple two-field form plus actions.

Table

Repeated rows with flexible and fixed-width cells.

API Reference

Skeleton is a thin wrapper around a div. It accepts React.ComponentProps<'div'> in full (see MDN div / React typings). The implementation merges className with default loading styles.

Skeleton

All other div attributes (id, style, role, aria-*, event handlers, …) are forwarded.

Default className fragment (before your className): animate-pulse rounded-md bg-neutral-alpha-5. Add utilities for size, radius, and layout (for example h-4, w-full, rounded-full).

Accessibility

Skeleton nodes are inert placeholders; expose loading state on a parent with aria-busy="true" while placeholders are shown, and avoid using heading or landmark roles on skeleton markup. Pulse animation uses Tailwind animate-pulse; respect prefers-reduced-motion in product code if you need to suppress motion (for example wrap utilities with motion-safe: / motion-reduce:).

Source in the repo: packages/experience-system/src/components/Skeleton/Skeleton.tsx. Agent-oriented contracts: packages/experience-system/src/components/Skeleton/Skeleton.instructions.md.