Skeleton Orchestra

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<SkeletonOrchestra />

Installation

npx shadcn@latest add https://webberui.com/r/skeleton-orchestra.json

Usage

import {
  SkeletonOrchestra,
  SkeletonSlot,
} from "@/components/ui/skeleton-orchestra";

<SkeletonOrchestra loading={isLoading} stagger={0.1} className="space-y-4">
  <SkeletonSlot
    skeleton={
      <div className="size-10 rounded-full bg-neutral-200 dark:bg-neutral-800" />
    }
  >
    <Avatar />
  </SkeletonSlot>
  <SkeletonSlot>
    <h3>Article title</h3>
  </SkeletonSlot>
  <SkeletonSlot>
    <p>Body copy — the default skeleton draws a rounded gray block sized to this content.</p>
  </SkeletonSlot>
  <SkeletonSlot index={9}>
    <p>Set an index to make this passage solidify last.</p>
  </SkeletonSlot>
</SkeletonOrchestra>;

Props

SkeletonOrchestra

SkeletonSlot

How it works

• Wave order: without an index, numbering follows the slots' mount order (that is, DOM order, usually top-left to bottom-right); each cell's delay = wave order × stagger, producing a directional wave
• Isomorphic skeletons: the default skeleton renders the real content as an invisible placeholder to get its size, so the gray blocks are isomorphic with the final layout and nothing jumps when it solidifies
• Cross transition: AnimatePresence mode="popLayout" fades and shrinks the skeleton away while the content emerges with scale/opacity, the two crossing over so cells solidify one at a time
• Back to loading: when loading flips back to true, the skeletons take over immediately with no wave delay applied
• Reduce motion: when the user has "reduce motion" enabled at the system level, there are no waves and no scaling — skeletons and content switch directly and the pulse animation is disabled too; the first render still matches the SSR output
• Accessibility: the container carries aria-busy and the skeleton blocks are aria-hidden, so assistive technology only ever reads the real content