---
title: "Skeleton"
description: "Holds the space of content while it loads so the layout does not jump. It is decorative and never replaces the text that communicates status."
kind: component
id: C-022
registry: "skeleton"
docs: "https://koten.codehive.com.co/components/skeleton"
markdown: "https://koten.codehive.com.co/md/components/skeleton.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/skeleton.json"
language: en
---

# Skeleton · 骨組み

> Component C-022 in the Koten UI catalog.

Holds the space of content while it loads so the layout does not jump. It is decorative and never replaces the text that communicates status.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/skeleton.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/skeleton.json
```

## Files

- `@/components/ui/skeleton.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### List loading

The pieces copy the final row shape: avatar, two text lines and fixed-height rows.

```tsx
<div className="grid gap-[var(--koten-gap)]">
  <div className="flex items-center gap-2">
    <Skeleton className="size-8 shrink-0" />
    <div className="grid flex-1 gap-1">
      <Skeleton className="h-3 w-1/3" />
      <Skeleton className="h-2 w-2/3" />
    </div>
  </div>
  <Skeleton className="h-[var(--koten-row-h)] w-full" />
  <Skeleton className="h-[var(--koten-row-h)] w-full" />
  <Skeleton className="h-[var(--koten-row-h)] w-full" />
</div>
```

### Card loading

The block keeps the size of the final report; only the content is replaced.

```tsx
<div className="grid max-w-sm gap-2 border border-rule bg-surface p-[var(--koten-panel-p)]">
  <Skeleton className="h-3 w-1/2" />
  <Skeleton className="h-2 w-full" />
  <Skeleton className="h-2 w-5/6" />
  <Skeleton className="mt-2 h-24 w-full" />
</div>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `className` | `string` | `—` | Defines size and shape using the measurements of the real content. |
| `div props` | `ComponentProps<"div">` | `—` | Forwarded to the div; aria-hidden is always applied and cannot be removed. |

## Accessibility

- Skeleton is always aria-hidden: it announces nothing on its own.
- The container must communicate loading with text or aria-busy; the skeleton does not replace that message.
- Match the final size of the content to avoid layout shifts.
- With prefers-reduced-motion the pulse stops; the space stays occupied.

## Sources

- Catalog page: https://koten.codehive.com.co/components/skeleton
- Markdown: https://koten.codehive.com.co/md/components/skeleton.md
- Repository: https://github.com/codehive-colombia/koten