Version: latest

Server Component

Skeleton is best rendered on the server. Use the standard import (e.g. @prokodo/ui/skeleton) — the library detects the runtime automatically.

Skeleton

Skeleton renders an animated pulsing placeholder to prevent layout shift during content loading. Supports text, circular, and rectangular variants.

Live demo →

Overview

import { Skeleton } from "@prokodo/ui/skeleton"

{
  /* Text placeholder */
}
;<Skeleton variant="text" lines={3} />

{
  /* Avatar circle */
}
;<Skeleton variant="circle" width={48} height={48} />

{
  /* Card rectangle */
}
;<Skeleton variant="rect" width="100%" height={200} />

Live PreviewOpen in Storybook ↗

Import

import { Skeleton } from "@prokodo/ui/skeleton"

CSS:

import "@prokodo/ui/skeleton.css"

Props

Prop	Type	Default	Required	Description
`variant`	`"text" \| "circular" \| "rectangular"`	`"text"`	—	Shape variant of the skeleton.
`animation`	`"pulse" \| "wave" \| "none"`	`"pulse"`	—	Animation style.
`width`	`number \| string`	—	—	Width of the skeleton.
`height`	`number \| string`	—	—	Height of the skeleton.
`className`	`string`	—	—	CSS class on root element.

See src/components/skeleton/Skeleton.model.ts for the full SkeletonProps type.

Design Tokens

Customise via CSS custom properties on :root or a scoped ancestor.

Token	Default	Description
`--pk-skeleton-bg`	`rgba(0, 0, 0, 0.08)`	Skeleton background (light)
`--pk-skeleton-bg-dark`	`rgba(30, 48, 79, 0.11)`	Skeleton background (dark)
`--pk-skeleton-shimmer-fg`	`var(--pk-palette-white)`	Shimmer highlight (light)
`--pk-skeleton-shimmer-fg-dark`	`var(--pk-color-brand)`	Shimmer highlight (dark)
`--pk-skeleton-radius`	`4px`	Border-radius

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.
4.1.3	Status Messages (AA)	✅ Fulfilled	Status messages (loading, success, error, progress) must reach assistive technologies without a focus change (aria-live or role='status').

Test coverage: 3 jest-axe assertion(s) across 1 test file(s) · 1 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Skeleton in Storybook

Source

src/components/skeleton/Skeleton.model.ts