---
title: Skeleton
description: >-
  A loading placeholder component for text, round, or box shapes with
  synchronized shimmer animation.
---

# Skeleton

## Overview

Skeletons indicate that content is loading. They preserve layout, reduce visual shifts, and help users understand that text, media, or interface elements will appear soon.

```tsx
<div style={{ display: "flex", gap: 12 }}>
	<Skeleton variant="round" height={48} />
	<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
		<Skeleton variant="box" width={200} height={28} />
		<Skeleton variant="box" width={150} height={12} />
	</div>
</div>
```

## Usage Guidelines

- **Match the content's layout:** Use skeletons that match the size and structure of the content they replace. This keeps the interface stable and reduces layout shifts.
- **Show only the essential structure:** Use enough skeletons to convey the layout and hierarchy of the loading content. Do not create a placeholder for every element.
- **Use only while loading:** Show skeletons when content is expected soon, and replace them as soon as real content becomes available.

## API Reference

### `Skeleton`

| Prop        | Type                         | Default     |
| ----------- | ---------------------------- | ----------- |
| `variant`   | `"text" \| "round" \| "box"` | `"text"`    |
| `width`     | `number \| string`           | `undefined` |
| `height`    | `number \| string`           | `undefined` |
| `className` | `string`                     | `undefined` |

## Examples

### Text

Text skeletons are used as placeholders for prominent text elements, such as titles and subtitles. Text skeletons automatically match the dimensions of the text they replace.

```tsx
<h2>{isDataLoaded ? data.title : <Skeleton variant="text" />}</h2>
<p>{isDataLoaded ? data.body : <Skeleton variant="text" />}</p>
```

### Round

Round skeletons are used as placeholders for circular and pill-shaped elements, such as avatars or buttons.

```tsx
<Skeleton variant="round" height={40} />
```

### Box

Box skeletons are used as placeholders for square or rectangular elements, such as images.

```tsx
<Skeleton variant="box" width={40} />
```