---
title: Skeleton
description: Use to show a placeholder while content is loading.
icon: loader
author:
  name: shadcn
  url: https://github.com/shadcn
search:
  keywords: [loading placeholder, shimmer]
related:
  - /spinner
  - /progress
mode: wide
---

<PoweredBy packages={[{ name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/skeleton' }]} />

### Installation

```package-install
npx shadcn@latest add @redpanda/skeleton
```

<ComponentPreview name="skeleton-demo" />

## When to use

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

```mermaid
graph TD;
    A[❓ Content loading?] --> B{Known layout structure?};
    A --> C[⚠️ Use other loading indicators];
    B --> D[✅ Use Skeleton Component];
    B --> E{Unknown structure?};
    D --> F{Multiple elements?};
    E --> G[⚠️ Use Spinner or Progress];
    F --> H[✅ Multiple Skeleton components];
    F --> I[✅ Single Skeleton component];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class D,H,I recommended;
    class C,G discouraged;
    class A,B,E,F decision;
```

## 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:

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

## Examples

### Card

<ComponentPreview name="skeleton-card-demo" description="A card with skeleton showing a loading state." />

## Credits

- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/skeleton) for the skeleton style.