Kobalte.v0.13.1

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

PropDescription
visibleboolean
The visible state of the Skeleton. Sets the data-visible data attribute.
animateboolean
Whether the skeleton should animate. Sets the data-animate data attribute.
widthnumber
The width of the skeleton in px. Defaults to 100%.
heightnumber
The height of the skeleton in px. Defaults to auto.
radiusnumber
Roundness of the skeleton in px. Sets border-radius.
circleboolean
Whether the skeleton should be a circle. Sets border-radius and width to the height.
childrenJSX.Element
The children of the Skeleton.
Data attributeDescription
data-visiblePresent when the Skeleton is visible.
data-animatePresent when the Skeleton can animate.

Rendered elements

ComponentDefault rendered element
Skeletondiv