Kobalte.v0.11.2

Skeleton

Visually indicates content loading

Import

ts
import { Skeleton } from "@kobalte/core";
ts
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.Root: The root container for a skeleton.
tsx
<Skeleton.Root />
tsx
<Skeleton.Root />

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.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
Skeleton.Rootdiv
Made in 🇫🇷 by Fabien MARIE-LOUISE.
Community