Kobalte.v0.13.7

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.

tsx
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>
);
}
tsx
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.

tsx
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>
);
}
tsx
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

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

tsx
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>
);
}
tsx
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).

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