Wuko
Components

Skeleton

A placeholder block with a subtle pulse animation. Use to indicate loading state for content of any shape. Pass className with width, height, and rounded utilities to match the final content's silhouette.

Installation

terminal
npx shadcn@latest add @wuko/skeleton

Usage

components/example.tsx
import { Skeleton } from "@/components/ui/skeleton";

export function Example() {
  return <Skeleton className="h-5 w-32" />;
}

Avatar with text

A circular avatar skeleton next to two text lines — a common pattern for user-list loading states.

tsx
<div className="flex items-center gap-4">
  <Skeleton className="size-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-48" />
    <Skeleton className="h-4 w-32" />
  </div>
</div>

Card

An image placeholder with title and description lines. Matches the shape of a typical media card.

tsx
<div className="flex flex-col gap-3 rounded-lg border border-wuko-border p-4">
  <Skeleton className="h-48 w-72 rounded-md" />
  <div className="space-y-2">
    <Skeleton className="h-5 w-3/4" />
    <Skeleton className="h-4 w-full" />
    <Skeleton className="h-4 w-2/3" />
  </div>
</div>

Text

Vary widths slightly between lines (e.g., last line at w-3/4) for a more natural paragraph silhouette.

tsx
<div className="w-80 space-y-2">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
</div>

Form

Pair label-sized skeletons with input-sized blocks to preview a form layout before its data resolves.

tsx
<div className="w-80 space-y-4">
  <div className="space-y-2">
    <Skeleton className="h-3.5 w-16" />
    <Skeleton className="h-9 w-full rounded-md" />
  </div>
  <div className="space-y-2">
    <Skeleton className="h-3.5 w-20" />
    <Skeleton className="h-9 w-full rounded-md" />
  </div>
  <Skeleton className="h-9 w-24 rounded-md" />
</div>

Props

Skeleton forwards all native <div> attributes.

PropTypeDefaultDescription
classNamestring—Tailwind classes for width, height, shape, and any overrides. Required to give the skeleton a visible size.

Accessibility

  • Skeleton is a decorative placeholder. Screen readers should not announce it as content. Wrap the loading region with aria-busy="true" and an aria-label describing what is loading.
  • For long-running operations, consider adding visually-hidden "Loading..." text next to the skeletons so screen-reader users get an audible cue.
  • The pulse animation respects prefers-reduced-motion automatically via Tailwind's animate-pulse utility.
← Previous
Select
Next →
Table