# Skeleton

An animated placeholder that mimics content layout while data is loading.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode name="skeleton">
      <SkeletonDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode name="skeleton">
      <SkeletonDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode name="skeleton">
      <SkeletonDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode name="skeleton">
      <SkeletonDemo />
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## Usage [#usage]

Match the skeleton shape to the content it replaces. Use `rounded-full` for avatars, `rounded-xl` for cards, and default `rounded-md` for text lines and thumbnails.

```tsx
{/* Avatar + text row */}
<div className="flex items-center gap-3">
  <Skeleton className="size-10 rounded-full" />
  <div className="flex flex-1 flex-col gap-2">
    <Skeleton className="h-4 w-3/4" />
    <Skeleton className="h-3 w-1/2" />
  </div>
</div>
```

## In a list [#in-a-list]

```tsx
{isLoading
  ? Array.from({ length: 5 }).map((_, i) => (
      <div key={i} className="flex items-center gap-3">
        <Skeleton className="size-9 rounded-md" />
        <div className="flex flex-1 flex-col gap-1.5">
          <Skeleton className="h-3.5 w-2/5" />
          <Skeleton className="h-3 w-3/5" />
        </div>
      </div>
    ))
  : items.map((item) => <ListItem key={item.id} {...item} />)}
```

## Props [#props]

`Skeleton` is a plain `<div>` — pass any `className` to control size and shape.

| Prop        | Type     | Description                            |
| ----------- | -------- | -------------------------------------- |
| `className` | `string` | Width, height, border-radius overrides |

## Specs [#specs]

```md
# Mint — Skeleton Specs

## Component
- name: skeleton
- file: registry/mint/skeleton.tsx
- installs to: components/ui/skeleton.tsx
- dependencies: none
- registryDependencies: none

## What is it
An animated placeholder that mimics the shape and layout of real content while
data is loading. It renders as a single styled `<div>` — size and shape are
always controlled by the caller via `className`. Prefer Skeleton over spinners
when the content structure is known in advance; do not use it for actions or
interactive states.

## Visual identity
Renders as a soft mint-green tinted block (0.375rem radius via `rounded-md`)
with an `animate-pulse` fade cycle. Uses the `--accent` surface colour, giving
a light, low-contrast shimmer that stays true to Mint without drawing
attention away from real content.

## Design tokens
--accent: oklch(0.92 0.05 155) / oklch(0.26 0.05 155)   — pulse surface (light / dark)

## States
- animate-pulse: continuous opacity fade; always active while the skeleton is mounted

## Conventions
- Set width and height on the caller: e.g. `className="h-4 w-3/4"`
- Use `rounded-full` for circular avatars, `rounded-xl` for card shapes, default `rounded-md` for text lines and thumbnails
- Repeat in a list with `Array.from({ length: n })` — use index as key only while loading
- Replace the entire skeleton tree with real content in a single render; avoid partial swaps
- Sub-components expose `data-slot="skeleton"` for CSS targeting
```

## Installation [#installation]

<CommandBox componentName="skeleton" className="mt-2" />