# Skeleton

Loading placeholders you shape to match your content. They wait calmly and still, with no shimmer, then the real content switches on in their place, row by row.

> Primitive · Free · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add skeleton
```

## Import

```tsx
import { Skeleton, SkeletonSwitch } from "@/components/ui/skeleton/skeleton";
```

## Variants

- `pulse` — Inbox switch-on: `npx @lumioui/cli add skeleton-pulse`
- `shimmer` — Store grid, long wait: `npx @lumioui/cli add skeleton-shimmer`

## Props

### Skeleton

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `variant?` | `"pulse" | "shimmer"` | "pulse" (default): a still, dim block. @deprecated "shimmer" — now identical to "pulse". Nothing moves across a placeholder: loading is still, dim structure that switches on when ready. |
| `active?` | `boolean` | Kept for compatibility — the block is always still. Default true. |

### SkeletonSwitch

| Prop | Type | Notes |
| --- | --- | --- |
| `loaded` | `boolean` | false shows `placeholder`; true switches the real content on in place. |
| `placeholder` | `React.ReactNode` | The dim layout shown while loading — the exact shape of `children`. |
| `children` | `React.ReactNode` | The real content. Each top-level child switches on in turn on the row rhythm. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/skeleton