# Skeleton

> Shimmering placeholders for loading content.

Component · Free · https://lodeui.com/components/skeleton

## When to use

- Loading states where you know the layout, so content doesn't jump in.

## When not to use

- Actions in progress: use a loading button.
- Unknown layout: use a spinner.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/skeleton.json
```

## Usage

```tsx title="example.tsx"
import { Skeleton, SkeletonText } from "@/components/ui/skeleton";

export function CardLoading() {
  return (
    <div role="status" aria-label="Loading" className="space-y-3">
      <Skeleton className="h-40 w-full" />
      <SkeletonText lines={2} />
    </div>
  );
}
```

## API reference

### Skeleton

A shimmering block. Size it with classes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| className | `string` | – | Width, height and radius. |

### SkeletonText

Lines of text placeholder; the last one is shorter.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| lines | `number` | `3` | Number of lines. |

## Accessibility

- Skeletons are aria-hidden. Put role="status" with a label on the wrapper.

## Motion

- A soft shimmer sweeps across.

## Responsive behavior

- Size with responsive classes to match the real content.

## Performance

- A CSS animation; no JavaScript.

## Notes for AI

- Match skeleton sizes to the final content to avoid layout shift.

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Empty state](https://lodeui.com/components/empty-state) — Empty, no-results, error, offline, maintenance and rate-limit states with one API.