Browse documentation

Component

Skeleton

Size the placeholder to match the content it represents. Add a separate status message if loading needs announcement.

Preview

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

Copy Skeleton · bash
pnpm exec ui add skeleton
Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

Skeleton example · tsx
import { Skeleton } from '@nimjs/ui';

export function Example() {
  return (
    <Skeleton className="h-4 w-48" />
  );
}

System metadata

API and states

Size the placeholder to match the content it represents. Add a separate status message if loading needs announcement.

Accessibility

Skeleton is hidden from assistive technology and its animation stops for reduced motion.