# Skeleton

Visually indicates content loading

## Import

```
Copyts
import { Skeleton } from "@kobalte/core/skeleton";
// or
import { Root } from "@kobalte/core/skeleton";
// or (deprecated)
import { Skeleton } from "@kobalte/core";
```

```
Copyts
import { Skeleton } from "@kobalte/core/skeleton";
// or
import { Root } from "@kobalte/core/skeleton";
// or (deprecated)
import { Skeleton } from "@kobalte/core";
```

## Features

- Support for custom width and height.
- Support for circle skeleton.
- Can toggle visiblity and animation properties.

## Anatomy

The skeleton consists of:

- **Skeleton:** The root container for a skeleton.

```
Copytsx
<Skeleton />
```

```
Copytsx
<Skeleton />
```

## Example

A UI toolkit for building accessible web apps and design systems with SolidJS.

index.tsxstyle.css

```
Copytsx
import { Skeleton } from "@kobalte/core/skeleton";
import "./style.css";

function App() {
  return (
  <Skeleton class="skeleton" radius={10}>
    <p>
      A UI toolkit for building accessible web apps and design systems with SolidJS.
    </p>
  </Skeleton>
  );
}
```

```
Copytsx
import { Skeleton } from "@kobalte/core/skeleton";
import "./style.css";

function App() {
  return (
  <Skeleton class="skeleton" radius={10}>
    <p>
      A UI toolkit for building accessible web apps and design systems with SolidJS.
    </p>
  </Skeleton>
  );
}
```

## Usage

### Multiple skeletons

![Nicole Steeves](https://pbs.twimg.com/profile_images/1509139491671445507/pzWYjlYN_400x400.jpg)

Kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.

index.tsxstyle.css

```
Copytsx
import { Skeleton } from "@kobalte/core/skeleton";
import { Image } from "@kobalte/core/image";
import "./style.css";

function App() {
  return (
    <div class="multiple-root">
      <div class="multiple-profile">
        <Skeleton class="skeleton" height={50} circle>
          <Image class="multiple-avatar">
            <Image.Img
              class="image__img"
              src="https://pbs.twimg.com/profile_images/1509139491671445507/pzWYjlYN_400x400.jpg"
              alt="Nicole Steeves"
            />
          </Image>
        </Skeleton>
        <Skeleton class="skeleton" height={20} radius={10}>
          Kobalte
        </Skeleton>
      </div>
      <Skeleton class="skeleton" radius={10}>
        <p>
          A UI toolkit for building accessible web apps and design systems with SolidJS.
        </p>
      </Skeleton>
    </div>
  );
}
```

```
Copytsx
import { Skeleton } from "@kobalte/core/skeleton";
import { Image } from "@kobalte/core/image";
import "./style.css";

function App() {
  return (
    <div class="multiple-root">
      <div class="multiple-profile">
        <Skeleton class="skeleton" height={50} circle>
          <Image class="multiple-avatar">
            <Image.Img
              class="image__img"
              src="https://pbs.twimg.com/profile_images/1509139491671445507/pzWYjlYN_400x400.jpg"
              alt="Nicole Steeves"
            />
          </Image>
        </Skeleton>
        <Skeleton class="skeleton" height={20} radius={10}>
          Kobalte
        </Skeleton>
      </div>
      <Skeleton class="skeleton" radius={10}>
        <p>
          A UI toolkit for building accessible web apps and design systems with SolidJS.
        </p>
      </Skeleton>
    </div>
  );
}
```

### Toggle example

Show content

A UI toolkit for building accessible web apps and design systems with SolidJS.

index.tsxstyle.css

```
Copytsx
import { Skeleton } from "@kobalte/core/skeleton";
import { ToggleButton } from "@kobalte/core/toggle-button";
import "./style.css";

function App() {
  const [visible, setVisible] = createSignal(true);
  return (
    <div class="toggle-root">
      <ToggleButton class="toggle-button" pressed={visible()} onChange={setVisible}>
        Skeleton {visible() ? "Visible" : "Not Visible"}
      </ToggleButton>
      <Skeleton class="skeleton" visible={visible()}>
        <p>
          A UI toolkit for building accessible web apps and design systems with SolidJS.
        </p>
      </Skeleton>
    </div>
  );
}
```

```
Copytsx
import { Skeleton } from "@kobalte/core/skeleton";
import { ToggleButton } from "@kobalte/core/toggle-button";
import "./style.css";

function App() {
  const [visible, setVisible] = createSignal(true);
  return (
    <div class="toggle-root">
      <ToggleButton class="toggle-button" pressed={visible()} onChange={setVisible}>
        Skeleton {visible() ? "Visible" : "Not Visible"}
      </ToggleButton>
      <Skeleton class="skeleton" visible={visible()}>
        <p>
          A UI toolkit for building accessible web apps and design systems with SolidJS.
        </p>
      </Skeleton>
    </div>
  );
}
```

## API Reference

### Skeleton

`Skeleton` is equivalent to the `Root` import from `@kobalte/core/skeleton` (and deprecated `Skeleton.Root`).

| Prop | Description |
| --- | --- |
| visible | `boolean`<br> The visible state of the Skeleton. Sets the `data-visible` data attribute. |
| animate | `boolean`<br> Whether the skeleton should animate. Sets the `data-animate` data attribute. |
| width | `number`<br> The width of the skeleton in px. Defaults to 100%. |
| height | `number`<br> The height of the skeleton in px. Defaults to auto. |
| radius | `number`<br> Roundness of the skeleton in px. Sets border-radius. |
| circle | `boolean`<br> Whether the skeleton should be a circle. Sets border-radius and width to the height. |
| children | `JSX.Element`<br> The children of the Skeleton. |

| Data attribute | Description |
| --- | --- |
| data-visible | Present when the Skeleton is visible. |
| data-animate | Present when the Skeleton can animate. |

## Rendered elements

| Component | Default rendered element |
| --- | --- |
| `Skeleton` | `div` |

Previous[←Separator](https://kobalte.dev/docs/core/components/separator)Next[Slider→](https://kobalte.dev/docs/core/components/slider)