# Skeleton

A pulsing loading placeholder you size to your own layout — text lines, a block, or a circle.

<p class="kai-tag-sub">kai-skeleton</p>

A pulsing placeholder that holds layout while content loads. It's a low-level primitive — pick a `variant` and size it to match what's coming, then compose several to mirror your own UI.

## Preview

> **tip:** 
Reach for `<kai-skeleton>` when you know the shape of what's loading and want to reserve its space — an avatar, a few lines of body copy, a card. It's a building block, not a preset: you place and size the shapes to your layout rather than picking a ready-made "comment skeleton". For a busy indicator with no known shape, use [Loader](/components/loader/) instead; to shimmer text that's already on screen, use [Text Shimmer](/components/text-shimmer/).

## Usage

Set `variant` to `text`, `rect`, or `circle`. Width is responsive by default (it fills its container); pass `width` / `height` to pin a size. For `text`, `lines` stacks multiple rows and shortens the last one so it reads like a paragraph.

```html
<kai-skeleton variant="text" lines="3"></kai-skeleton>
<kai-skeleton variant="circle" width="2.5rem"></kai-skeleton>
<kai-skeleton variant="rect" height="10rem"></kai-skeleton>
```

The default shimmer is a low-contrast foreground tint that reads in both light and dark; recolor it or change its opacity via `::part(skeleton)`.

## Examples

### Text lines

`lines` stacks rows for body copy; the last line is shorter so it doesn't look like a solid block.

### Rectangle

A block for images, cards, or media. Set `height` (and `width`, if you don't want it full-bleed).

### Circle

A round placeholder for avatars and icons. `width` is the diameter.

## Styling

The shimmer block is a single `::part` — recolor it or change its opacity from your own stylesheet, without piercing the shadow root.

## Props

## Composed from