Skeleton auto

Installation

$ npx shadcn@latest add https://goodui.dev/r/skeleton-auto.json

The file lands in components/goodui/skeleton-auto.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/skeleton-auto works too.

Usage

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { SkeletonSwap } from "@/components/goodui/skeleton-auto"

const placeholder = { name: "Maya Chen", email: "maya.chen@hey.com", notes: "Prefers Priya for color. Patch test before every appointment." }

export function ClientCard({ client, loading }: { client?: typeof placeholder; loading: boolean }) {
  const c = client ?? placeholder
  return (
    <SkeletonSwap loading={loading} className="rounded-xl border bg-card p-5">
      <div className="flex items-center gap-3">
        <Avatar className="size-12" data-skeleton>
          <AvatarFallback>{c.name.split(" ").map((n) => n[0]).join("")}</AvatarFallback>
        </Avatar>
        <div className="min-w-0">
          <div className="font-semibold">{c.name}</div>
          <div className="text-sm text-muted-foreground">{c.email}</div>
        </div>
      </div>
      <p className="mt-4 text-sm text-muted-foreground">{c.notes}</p>
    </SkeletonSwap>
  )
}

When to use

Examples

<SkeletonSwap
  loading={loading}
  className="rounded-xl border bg-card p-4"
  fallback={
    <div className="flex items-center gap-3">
      <SkeletonCircle size={36} />
      <div className="flex flex-1 flex-col gap-2">
        <SkeletonLine width="45%" />
        <SkeletonLine width="70%" className="h-2.5" />
      </div>
    </div>
  }
>
  <LocationSummary location={location} />
</SkeletonSwap>

<div className="flex flex-col gap-2">
  <Skeleton className="h-32 w-full rounded-xl" />
  <SkeletonLine width="60%" />
  <SkeletonLine width={120} />
</div>

API reference

Accessibility

• •While loading, the root has aria-busy and an sr-only role="status" says loadingLabel (default "Loading…"; pass a translation).
• •The placeholder content is inert and aria-hidden while loading, so nobody can focus or read the fake data; the skeleton layer is aria-hidden too.

Motion

• •One highlight band sweeps across every block every 1.7 s; each block offsets it by its own x position, so it reads as a single sweep over the whole layout.
• •Switching loading cross-fades the skeleton and the content over 350 ms (ease [0.4, 0, 0.2, 1]).
• •Reduced motion: the sweep is hidden, blocks stay static and the cross-fade shortens to 150 ms.

• •Tracing walks the content's DOM once per change: one block per wrapped text line (via Range rects) and one per image, svg, video, canvas, input, textarea, select, button, picture, iframe, progress, meter or data-skeleton element.
• •It re-traces on resize (ResizeObserver) and DOM mutations (MutationObserver), batched to one animation frame, and only while loading is true.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related