> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/skeleton.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Skeleton

Show a content placeholder while loading.

## Basic usage


Toggle loading

Loading content

Static placeholder

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/skeleton/basic.tsx"
import { Button, Flex, Skeleton, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function SkeletonBasic() {
  const [loading, setLoading] = useState(true);
  return (
    <Space direction="vertical" align="stretch">
      <Button variant="outline" onClick={() => setLoading(!loading)}>
        Toggle loading
      </Button>
      <Flex direction="column" gap="sm">
        <Text>Loading content</Text>
        <Skeleton loading={loading} avatar rows={3} rowWidths={['100%', '85%', '55%']} round>
          <p>Project content is ready.</p>
        </Skeleton>
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>Static placeholder</Text>
        <Skeleton active={false} title={false} rows={2} />
      </Flex>
    </Space>
  );
}
```

Expand code

## Skeleton API

| Property           | Type                            | Default | Description                     |
| ------------------ | ------------------------------- | ------- | ------------------------------- |
| `loading / active` | `boolean`                       | `true`  | Show placeholder / animate      |
| `avatar / round`   | `boolean`                       | `false` | Avatar placeholder / round rows |
| `title`            | `boolean`                       | `true`  | Title placeholder               |
| `titleWidth`       | `number \| string`              | `'38%'` | Title width                     |
| `rows`             | `number`                        | `3`     | Body rows, up to 20             |
| `rowWidths`        | `readonly (number \| string)[]` | —       | Widths of each row              |
| `children`         | `ReactNode`                     | —       | Loaded content                  |

## Types

Import the exported types when defining props or building item lists.

```ts
import type { SkeletonProps } from '@ifhover/leaf-ui';
```

## Usage notes

When loading is false, render children. Reduced motion preferences and ConfigProvider motion settings control the animation.