Skeleton

Visually indicates content loading

Import

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

ts
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.

tsx
<Skeleton />

tsx
<Skeleton />

Example

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

Usage

Multiple skeletons

Kobalte

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

Toggle example

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

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`