Skeleton

Use to show a placeholder while content is loading.

Installation

bash

npx shadcn@latest add @redpanda/skeleton

bash

pnpm dlx shadcn@latest add @redpanda/skeleton

bash

yarn dlx shadcn@latest add @redpanda/skeleton

bash

bunx shadcn@latest add @redpanda/skeleton

bash

nubx shadcn@latest add @redpanda/skeleton

bash

aube dlx shadcn@latest add @redpanda/skeleton

When to use

Skeletons show content placeholders during loading states. Use this decision tree:

Usage

tsx

import { Skeleton } from '@/components/ui/skeleton';

tsx

<Skeleton className="w-[100px] h-[20px] rounded-full" />

Anatomy

The Skeleton component provides loading state placeholders:

plaintext

Skeleton├── Base element (div)├── Animated background - shimmer effect├── Customizable dimensions - width/height via className├── Shape control - rounded variants└── Content-aware sizing - matches target content

Credits

We take our inspiration from Shadcn UI for the skeleton style.

Recent changes

patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133

minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121

minorv1.0.0Post-Base-UI polish. Public API unchanged.#116

majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114

minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109

See full history →

Skeleton

Installation

When to use

Usage

Anatomy

Examples

Card

Credits

Recent changes