---
title: Skeleton
description: "`Skeleton` is a component that acts as a placeholder until content is loaded."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/skeleton/skeleton.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/skeleton
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-skeleton--basic
---

```tsx
<VStack>
  <Skeleton />
  <SkeletonCircle />
  <SkeletonText />
</VStack>
```

## Usage

```tsx
import { Skeleton, SkeletonCircle, SkeletonText } from "@yamada-ui/react"
```

```tsx
import { Skeleton, SkeletonCircle, SkeletonText } from "@/components/ui"
```

```tsx
import { Skeleton, SkeletonCircle, SkeletonText } from "@workspaces/ui"
```

```tsx
<Skeleton />
<SkeletonCircle />
<SkeletonText />
```

### Change Variant

```tsx
<VStack>
  <HStack>
    <For each={["pulse", "shine"]}>
      {(variant) => (
        <VStack key={variant}>
          <SkeletonCircle variant={variant} />
          <SkeletonText variant={variant} lineClamp={2} />
          <Skeleton variant={variant} h="4xs" />
        </VStack>
      )}
    </For>
  </HStack>
</VStack>
```

### Change Size

```tsx
<VStack>
  <HStack>
    <SkeletonCircle boxSize="14" />
    <SkeletonText h="6" lineClamp={2} />
  </HStack>
  <Skeleton h="20" />
</VStack>
```

Additionally, by passing child elements, you can match the width and height.

```tsx
<VStack lineHeight="1">
  <HStack>
    <Skeleton>
      <Badge>Badge</Badge>
    </Skeleton>

    <Skeleton loading={false}>
      <Badge>Badge</Badge>
    </Skeleton>
  </HStack>

  <HStack>
    <SkeletonCircle>
      <Avatar
        name="プリン"
        src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
      />
    </SkeletonCircle>

    <SkeletonCircle loading={false}>
      <Avatar
        name="プリン"
        src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
      />
    </SkeletonCircle>
  </HStack>
</VStack>
```

### Change Blink Color

To change the blink color, use the `startColor` and `endColor` properties.

```tsx
<VStack>
  <Skeleton variant="shine" startColor="pink.500" endColor="orange.500" />
  <SkeletonCircle variant="shine" startColor="pink.500" endColor="orange.500" />
  <SkeletonText variant="shine" startColor="pink.500" endColor="orange.500" />
</VStack>
```

### Change Text Gap

To change the gap between text lines, set the `gap` property.

```tsx
<SkeletonText gap="md" />
```

### Specify Number of Lines

To specify the number of lines, set a numeric value to `lineClamp`.

```tsx
<SkeletonText lineClamp={5} />
```

### Change Blink Duration

To change the blink duration, set a numeric value (seconds) to `duration`.

```tsx
<VStack>
  <Skeleton duration={2} />
  <SkeletonCircle duration={2} />
  <SkeletonText duration={2} />
</VStack>
```

### Display Child Elements

To display child elements, pass `false` to `loading`.

```tsx
const { loading } = useAsync(() => wait(3000))

return (
  <VStack>
    <HStack>
      <SkeletonCircle loading={loading}>
        <Avatar
          name="上から見たプリン"
          src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
          size="xl"
        />
      </SkeletonCircle>

      <SkeletonText lineClamp={2} loading={loading} _loading={{ h: "5" }}>
        <Text fontWeight="bold" lineClamp={1}>
          プリン
        </Text>
        <Text lineClamp={1}>
          つぶらな 瞳が 揺れるとき 眠たくなるような 不思議で 気持ちの良い 歌を
          歌う。
        </Text>
      </SkeletonText>
    </HStack>
  </VStack>
)
```

### Change Fade In Duration

To change the fade in duration, set a numeric value (seconds) to `fadeDuration`.

```tsx
const { loading } = useAsync(() => wait(3000))

return (
  <VStack>
    <HStack>
      <SkeletonCircle fadeDuration={2} loading={loading}>
        <Avatar
          name="上から見たプリン"
          src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
          size="xl"
        />
      </SkeletonCircle>

      <SkeletonText
        fadeDuration={2}
        lineClamp={2}
        loading={loading}
        _loading={{ h: "5" }}
      >
        <Text fontWeight="bold" lineClamp={1}>
          プリン
        </Text>
        <Text lineClamp={1}>
          つぶらな 瞳が 揺れるとき 眠たくなるような 不思議で 気持ちの良い 歌を
          歌う。
        </Text>
      </SkeletonText>
    </HStack>
  </VStack>
)
```

## Props

### Skeleton

| Prop           | Default   | Type                                                                                                                                                              | Description                                                                                          |
| -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `as`           | -         | `As`                                                                                                                                                              | The HTML element to render.                                                                          |
| `asChild`      | -         | `boolean`                                                                                                                                                         | Merges its props onto its immediate child.                                                           |
| `css`          | -         | `CSSObject \| CSSObject[]`                                                                                                                                        | The CSS object.                                                                                      |
| `colorScheme`  | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                         | Set color scheme variables.                                                                          |
| `variant`      | `"pulse"` | `"none" \| "pulse" \| "shine"`                                                                                                                                    | The variant of the component.                                                                        |
| `duration`     | -         | `number \| string`                                                                                                                                                | The animation duration in seconds.                                                                   |
| `endColor`     | -         | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation end.                                                                      |
| `fadeDuration` | -         | `number \| string`                                                                                                                                                | The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition. |
| `fitContent`   | `false`   | `boolean`                                                                                                                                                         | If `true`, the skeleton will take the width of it's children.                                        |
| `loading`      | `true`    | `boolean`                                                                                                                                                         | If `false`, it'll render its children with a nice fade transition.                                   |
| `startColor`   | -         | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation start.                                                                    |

### SkeletonCircle

| Prop           | Default | Type                                                                                                                                                              | Description                                                                                          |
| -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `as`           | -       | `As`                                                                                                                                                              | The HTML element to render.                                                                          |
| `asChild`      | -       | `boolean`                                                                                                                                                         | Merges its props onto its immediate child.                                                           |
| `css`          | -       | `CSSObject \| CSSObject[]`                                                                                                                                        | The CSS object.                                                                                      |
| `colorScheme`  | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                         | Set color scheme variables.                                                                          |
| `variant`      | -       | `"none" \| "pulse" \| "shine"`                                                                                                                                    | The variant of the component.                                                                        |
| `duration`     | -       | `number \| string`                                                                                                                                                | The animation duration in seconds.                                                                   |
| `endColor`     | -       | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation end.                                                                      |
| `fadeDuration` | -       | `number \| string`                                                                                                                                                | The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition. |
| `fitContent`   | `false` | `boolean`                                                                                                                                                         | If `true`, the skeleton will take the width of it's children.                                        |
| `loading`      | `true`  | `boolean`                                                                                                                                                         | If `false`, it'll render its children with a nice fade transition.                                   |
| `startColor`   | -       | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation start.                                                                    |

### SkeletonText

| Prop           | Default | Type                                                                                                                                                              | Description                                                                                          |
| -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `as`           | -       | `As`                                                                                                                                                              | The HTML element to render.                                                                          |
| `asChild`      | -       | `boolean`                                                                                                                                                         | Merges its props onto its immediate child.                                                           |
| `css`          | -       | `CSSObject \| CSSObject[]`                                                                                                                                        | The CSS object.                                                                                      |
| `colorScheme`  | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                         | Set color scheme variables.                                                                          |
| `variant`      | -       | `"none" \| "pulse" \| "shine"`                                                                                                                                    | The variant of the component.                                                                        |
| `duration`     | -       | `string \| number`                                                                                                                                                | The animation duration in seconds.                                                                   |
| `endColor`     | -       | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation end.                                                                      |
| `fadeDuration` | -       | `string \| number`                                                                                                                                                | The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition. |
| `fitContent`   | `false` | `boolean`                                                                                                                                                         | If `true`, the skeleton will take the width of it's children.                                        |
| `lineClamp`    | -       | `number`                                                                                                                                                          | The number of lines to display.                                                                      |
| `loading`      | `true`  | `boolean`                                                                                                                                                         | If `false`, it'll render its children with a nice fade transition.                                   |
| `rootProps`    | -       | `HTMLStyledProps`                                                                                                                                                 | Props for the root element.                                                                          |
| `startColor`   | -       | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The color at the animation start.                                                                    |