> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Skeleton

> A placeholder preview of content before data is loaded, reducing perceived load time.

```tsx theme={null}
import { Skeleton } from "@fanvue/ui";
import type { SkeletonAnimation, SkeletonProps, SkeletonVariant } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-skeleton--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Skeleton — Default" />
</Frame>

```tsx theme={null}
import { Skeleton } from "@fanvue/ui";

<Skeleton width={200} height={20} />
```

## Card Skeleton

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-skeleton--card-skeleton&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Skeleton — Card Skeleton" />
</Frame>

```tsx theme={null}
import { Skeleton } from "@fanvue/ui";

<div className="w-72 space-y-3">
  <Skeleton variant="rectangular" width="100%" height={160} />
  <div className="flex items-center gap-3 px-2">
    <Skeleton variant="circular" width={40} height={40} />
    <div className="flex-1 space-y-1">
      <Skeleton variant="text" width="70%" />
      <Skeleton variant="text" width="50%" />
    </div>
  </div>
  <div className="space-y-1 px-2">
    <Skeleton variant="text" />
    <Skeleton variant="text" width="90%" />
  </div>
</div>
```

## Wrapping Children

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-skeleton--wrapping-children&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Skeleton — Wrapping Children" />
</Frame>

```tsx theme={null}
import { Skeleton } from "@fanvue/ui";

<Skeleton variant="rounded">
  <div className="h-24 w-64">Content shape preserved</div>
</Skeleton>
```

## All Variants

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-skeleton--all-variants&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Skeleton — All Variants" />
</Frame>

```tsx theme={null}
import { Skeleton } from "@fanvue/ui";

<div className="flex flex-col gap-4">
  <Skeleton variant="text" width={200} />
  <Skeleton variant="circular" width={40} height={40} />
  <Skeleton variant="rectangular" width={240} height={120} />
  <Skeleton variant="rounded" width={240} height={120} />
  <Skeleton variant="rectangular" width={240} height={120} animation="wave" />
  <Skeleton variant="rectangular" width={240} height={120} animation={false} />
</div>
```

## Avatar With Text

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-skeleton--avatar-with-text&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Skeleton — Avatar With Text" />
</Frame>

```tsx theme={null}
import { Skeleton } from "@fanvue/ui";

<div className="flex items-center gap-3">
  <Skeleton variant="circular" width={48} height={48} />
  <div className="flex-1 space-y-1">
    <Skeleton variant="text" width="60%" />
    <Skeleton variant="text" width="40%" />
  </div>
</div>
```

## Props

## Skeleton

A placeholder preview of content before data is loaded, reducing perceived load time. Mirrors common MUI Skeleton props for easy migration.

When used as a loading state, wrap the skeleton region with `aria-busy="true"` and provide an accessible label so screen readers can convey the loading state.

<ParamField path="animation" type="SkeletonAnimation" default="pulse">
  Animation style. Set to `false` to disable animation.
</ParamField>

<ParamField path="height" type="string | number">
  Height of the skeleton. Accepts a CSS value (number is treated as `px`).
</ParamField>

<ParamField path="variant" type="&#x22;text&#x22; | &#x22;circular&#x22; | &#x22;rounded&#x22; | &#x22;rectangular&#x22;" default="text">
  Shape variant of the skeleton.

  * `text` – a single line of text with slight vertical margin and rounded ends
  * `circular` – a circle (width and height should match)
  * `rectangular` – a sharp-cornered rectangle
  * `rounded` – a rectangle with rounded corners
</ParamField>

<ParamField path="width" type="string | number">
  Width of the skeleton. Accepts a CSS value (number is treated as `px`).
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `SkeletonAnimation`, `SkeletonProps`, `SkeletonVariant`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)