PettyUI/.firecrawl/kobalte.dev-docs-core-components-skeleton.md

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

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 The visible state of the Skeleton. Sets the data-visible data attribute.
animate	boolean Whether the skeleton should animate. Sets the data-animate data attribute.
width	number The width of the skeleton in px. Defaults to 100%.
height	number The height of the skeleton in px. Defaults to auto.
radius	number Roundness of the skeleton in px. Sets border-radius.
circle	boolean Whether the skeleton should be a circle. Sets border-radius and width to the height.
children	JSX.Element 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←SeparatorNextSlider→