---
title: Skeleton
description: A placeholder shown while content is loading.
---
import Source from './_generated/skeleton.mdx';

A placeholder that stands in for content while it loads. Android sweeps a shimmer gradient across it; iOS pulses its opacity. Pick a shape with `variant` and size it with utility classes.

<DemoFrame component="skeleton" />

## Installation

```bash
npx touchcn add skeleton
```

## Usage

<CodeGroup>

```html Angular
<tcn-skeleton variant="text" class="w-3/4" />
<tcn-skeleton variant="rect" class="h-24" />
<tcn-skeleton variant="circle" class="size-10" />
```

```tsx React
import { TcnSkeleton } from '@/components/ui/skeleton';

<TcnSkeleton variant="text" className="w-3/4" />
<TcnSkeleton variant="rect" className="h-24" />
<TcnSkeleton variant="circle" className="size-10" />
```

```vue Vue
<script setup lang="ts">
import { TcnSkeleton } from '@/components/ui/skeleton';
</script>

<template>
  <TcnSkeleton variant="text" class="w-3/4" />
  <TcnSkeleton variant="rect" class="h-24" />
  <TcnSkeleton variant="circle" class="size-10" />
</template>
```

</CodeGroup>

The element is `aria-hidden` so it stays out of the accessibility tree, and its animation freezes static under `prefers-reduced-motion`.

## Props

| Prop      | Type                            | Default  | Description                    |
| --------- | ------------------------------- | -------- | ------------------------------ |
| `variant` | `'text' \| 'circle' \| 'rect'`  | `'text'` | Placeholder shape.             |

<Source />