Skip to main content
Kobalte
ComponentsChangelog

Skeleton

Since v0.11.1@kobalte/core/skeletonSource

Visually indicates content loading

Import

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 visibility and animation properties.

Anatomy

The skeleton consists of:

  • Skeleton: The root container for a skeleton.
<Skeleton />

Example

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

import { Skeleton } from "@kobalte/core/skeleton";


export function BasicExample() {
  return (
    <Skeleton class={style.skeleton} radius={10}>
      <p>
        A UI toolkit for building accessible web apps and design systems with
        SolidJS.
      </p>
    </Skeleton>
  );
}
@keyframes skeleton-fade {
  0%,
  100% {
    opacity: 0.4;
  }


  50% {
    opacity: 1;
  }
}


.skeleton {
  height: auto;
  width: 100%;
  position: relative;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.skeleton[data-animate="true"]::after {
  animation: skeleton-fade 1500ms linear infinite;
}


.skeleton[data-visible="true"] {
  overflow: hidden;
}
.skeleton[data-visible="true"]::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 10;
  background-color: white;
}


.skeleton[data-visible="true"]::after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 11;
  background-color: gray;
}


.multiple-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.multiple-profile {
  display: flex;
  gap: 10px;
  align-items: center;
}


.toggle-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}


.toggle-button {
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 50%;
  outline: none;
  border-radius: 6px;
  background-color: hsl(200 98% 39%);
  color: white;
  font-size: 16px;
  line-height: 0;
}


.toggle-button:focus-visible {
  outline: 2px solid hsl(200 98% 39%);
  outline-offset: 2px;
}


.toggle-button[data-pressed] {
  background-color: hsl(0 72% 51%);
}

Usage

Multiple skeletons

Kobalte

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

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>
  );
}
@keyframes skeleton-fade {
  0%,
  100% {
    opacity: 0.4;
  }


  50% {
    opacity: 1;
  }
}


.skeleton {
  height: auto;
  width: 100%;
  position: relative;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.skeleton[data-animate="true"]::after {
  animation: skeleton-fade 1500ms linear infinite;
}


.skeleton[data-visible="true"] {
  overflow: hidden;
}
.skeleton[data-visible="true"]::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 10;
  background-color: white;
}


.skeleton[data-visible="true"]::after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 11;
  background-color: gray;
}


.multiple-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.multiple-profile {
  display: flex;
  gap: 10px;
  align-items: center;
}

Toggle example

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

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>
  );
}
@keyframes skeleton-fade {
  0%,
  100% {
    opacity: 0.4;
  }


  50% {
    opacity: 1;
  }
}


.skeleton {
  height: auto;
  width: 100%;
  position: relative;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.skeleton[data-animate="true"]::after {
  animation: skeleton-fade 1500ms linear infinite;
}


.skeleton[data-visible="true"] {
  overflow: hidden;
}
.skeleton[data-visible="true"]::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 10;
  background-color: white;
}


.skeleton[data-visible="true"]::after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 11;
  background-color: gray;
}


.toggle-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}


.toggle-button {
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 50%;
  outline: none;
  border-radius: 6px;
  background-color: hsl(200 98% 39%);
  color: white;
  font-size: 16px;
  line-height: 0;
}


.toggle-button:focus-visible {
  outline: 2px solid hsl(200 98% 39%);
  outline-offset: 2px;
}


.toggle-button[data-pressed] {
  background-color: hsl(0 72% 51%);
}

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

Last updated: 7/16/26, 7:09 AM