Skeleton

Solidtype_heroui.Skeleton is a <div> with the classes HeroUI’s own skeletonVariants gives, shaped by its class_. Kobalte’s Skeleton is a wrapper that hides its content while it loads, with a role and sizes of its own; HeroUI’s is the placeholder alone, which this is, with no behaviour.

Usage

skeleton_usage.mlx

module Skeleton = Solidtype_heroui.Skeleton

let make () =
  <div class_="shadow-panel w-[250px] space-y-5 rounded-lg bg-transparent p-4">
    <Skeleton class_="h-32 rounded-lg" />
    <div class_="space-y-3">
      <Skeleton class_="h-3 w-3/5 rounded-lg" />
      <Skeleton class_="h-3 w-4/5 rounded-lg" />
      <Skeleton class_="h-3 w-2/5 rounded-lg" />
    </div>
  </div>

Examples

Text Content

skeleton_text.mlx

module Skeleton = Solidtype_heroui.Skeleton

let make () =
  <div class_="w-full max-w-md space-y-3">
    <Skeleton class_="h-4 w-full rounded" />
    <Skeleton class_="h-4 w-5/6 rounded" />
    <Skeleton class_="h-4 w-4/6 rounded" />
    <Skeleton class_="h-4 w-full rounded" />
    <Skeleton class_="h-4 w-3/6 rounded" />
  </div>

User Profile

skeleton_profile.mlx

module Skeleton = Solidtype_heroui.Skeleton

let make () =
  <div class_="flex items-center gap-3">
    <Skeleton class_="h-10 w-10 shrink-0 rounded-full" />
    <div class_="flex-1 space-y-2">
      <Skeleton class_="h-3 w-36 rounded-lg" />
      <Skeleton class_="h-3 w-24 rounded-lg" />
    </div>
  </div>

List Items

skeleton_list.mlx

module Skeleton = Solidtype_heroui.Skeleton

let make () =
  <div class_="w-full max-w-sm space-y-4">
    <div class_="flex items-center gap-3">
      <Skeleton class_="h-10 w-10 shrink-0 rounded-lg" />
      <div class_="flex-1 space-y-2">
        <Skeleton class_="h-3 w-full rounded" />
        <Skeleton class_="h-3 w-4/5 rounded" />
      </div>
    </div>
    <div class_="flex items-center gap-3">
      <Skeleton class_="h-10 w-10 shrink-0 rounded-lg" />
      <div class_="flex-1 space-y-2">
        <Skeleton class_="h-3 w-full rounded" />
        <Skeleton class_="h-3 w-4/5 rounded" />
      </div>
    </div>
    <div class_="flex items-center gap-3">
      <Skeleton class_="h-10 w-10 shrink-0 rounded-lg" />
      <div class_="flex-1 space-y-2">
        <Skeleton class_="h-3 w-full rounded" />
        <Skeleton class_="h-3 w-4/5 rounded" />
      </div>
    </div>
  </div>

Grid

skeleton_grid.mlx

module Skeleton = Solidtype_heroui.Skeleton

let make () =
  <div class_="grid w-full max-w-xl grid-cols-3 gap-4">
    <Skeleton class_="h-24 rounded-xl" />
    <Skeleton class_="h-24 rounded-xl" />
    <Skeleton class_="h-24 rounded-xl" />
  </div>

Single Shimmer

One shimmer passes over every skeleton at once: the skeleton--shimmer class on their container, and animation_type=`none on each.

skeleton_single_shimmer.mlx

module Skeleton = Solidtype_heroui.Skeleton

let make () =
  <div
    class_="skeleton--shimmer relative grid w-full max-w-xl grid-cols-3 gap-4 \
            overflow-hidden rounded-xl">
    <Skeleton animation_type=`none class_="h-24 rounded-xl" />
    <Skeleton animation_type=`none class_="h-24 rounded-xl" />
    <Skeleton animation_type=`none class_="h-24 rounded-xl" />
  </div>

Animation Types

Shimmer

Pulse

None

skeleton_animation_types.mlx

module Skeleton = Solidtype_heroui.Skeleton

let make () =
  <div
    class_="grid w-full max-w-xl grid-cols-1 gap-6 sm:grid-cols-2 \
            lg:grid-cols-3">
    <div class_="space-y-2">
      <p class_="truncate text-xs text-muted">"Shimmer"</p>
      <div class_="shadow-panel space-y-3 rounded-lg bg-transparent p-4">
        <Skeleton animation_type=`shimmer class_="h-20 rounded-lg" />
        <Skeleton animation_type=`shimmer class_="h-3 w-3/5 rounded-lg" />
        <Skeleton animation_type=`shimmer class_="h-3 w-4/5 rounded-lg" />
      </div>
    </div>
    <div class_="space-y-2">
      <p class_="truncate text-xs text-muted">"Pulse"</p>
      <div class_="shadow-panel space-y-3 rounded-lg bg-transparent p-4">
        <Skeleton animation_type=`pulse class_="h-20 rounded-lg" />
        <Skeleton animation_type=`pulse class_="h-3 w-3/5 rounded-lg" />
        <Skeleton animation_type=`pulse class_="h-3 w-4/5 rounded-lg" />
      </div>
    </div>
    <div class_="space-y-2">
      <p class_="truncate text-xs text-muted">"None"</p>
      <div class_="shadow-panel space-y-3 rounded-lg bg-transparent p-4">
        <Skeleton animation_type=`none class_="h-20 rounded-lg" />
        <Skeleton animation_type=`none class_="h-3 w-3/5 rounded-lg" />
        <Skeleton animation_type=`none class_="h-3 w-4/5 rounded-lg" />
      </div>
    </div>
  </div>

Customization

Tailwind CSS

class_ is added after HeroUI’s classes.

skeleton_tailwind.mlx

module Skeleton = Solidtype_heroui.Skeleton

let bone = "animate-shine rounded-lg bg-neutral-200/90 dark:bg-neutral-800/90"

let make () =
  <div
    class_="w-[250px] space-y-5 rounded-xl border border-border/80 bg-surface \
            p-4 shadow-sm ring-1 ring-black/5 dark:ring-white/10">
    <Skeleton class_=(fun () -> "h-32 " ^ bone) />
    <div class_="space-y-3">
      <Skeleton class_=(fun () -> "h-3 w-3/5 " ^ bone) />
      <Skeleton class_=(fun () -> "h-3 w-4/5 " ^ bone) />
      <Skeleton class_=(fun () -> "h-3 w-2/5 " ^ bone) />
    </div>
  </div>

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every skeleton, as with HeroUI in React:

@layer components {
  .skeleton {
    @apply bg-surface-secondary/50;
  }

  .skeleton--pulse {
    @apply animate-pulse opacity-75;
  }

  .skeleton--none {
    @apply opacity-50;
  }
}

Global Animation Configuration

The page’s --skeleton-animation is the animation of every skeleton given none, shimmer, pulse or none, as in React:

:root {
  --skeleton-animation: pulse;
}

.dark, [data-theme="dark"] {
  --skeleton-animation: shimmer;
}

A skeleton reads it once it is in the browser, never on the server, so a prerendered skeleton hydrates as it was rendered, a shimmer, and then takes the page’s. A value it does not know is a shimmer.

Styling Reference

CSS Classes

• .skeleton, and its animations .skeleton--shimmer, .skeleton--pulse, .skeleton--none

API Reference

Each prop beside the name HeroUI’s React component gives it.

Skeleton

React	solidtype	Type	Default	Description
animationType	animation_type	[ `shimmer | `pulse | `none ]	the page’s --skeleton-animation, else `shimmer	How it moves
className	class_	string		Added after HeroUI’s classes: its shape

Beside React

Original HeroUI documentation: Skeleton.

The same HeroUI Skeleton twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two: a marked row is one they disagree on.

solidtype — OCaml, on Solid and Kobalte

React — TypeScript, on React Aria

attribute	solidtype	React