Skeleton React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import Skeleton from @/components/ui/skeleton.

import { Skeleton, SkeletonCard } from "@/components/ui/skeleton"

type Listing = { title: string; city: string; photo: string }

export function ListingCard({ listing }: { listing?: Listing }) {
  if (!listing) return <SkeletonCard label="Loading the listing" />
  return (
    <article className="flex flex-col gap-3">
      <img src={listing.photo} alt="" className="aspect-[16/10] w-full rounded-[10px] object-cover" />
      <h3 className="text-[15px] font-semibold">{listing.title}</h3>
      <p className="text-[13px] text-muted-foreground">{listing.city}</p>
    </article>
  )
}

export function Seller({ loading }: { loading: boolean }) {
  return (
    <div className="flex items-center gap-3">
      <Skeleton shape="circle" loading={loading}>
        <img src="/ana-pop.jpg" alt="Emma Carter" className="size-10 rounded-full" />
      </Skeleton>
      <Skeleton shape="line" loading={loading}>
        <p className="text-sm font-medium">Emma Carter</p>
      </Skeleton>
    </div>
  )
}

Props

• shapedefault "rect"
  "rect" | "circle" | "line"

  rect: a block with radius (full width, 96px tall until you size it). circle: a round block, 40px unless width says otherwise. line: a 14px text line.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corners of a rect: 0 / 6 / 10 / 16px or a pill. Circles and lines are always round. A rect wrapping real content copies the corners of what it wraps when that has any (a button, a rounded photo).

• animationdefault "shimmer"
  "shimmer" | "pulse" | "none"

  shimmer: a soft highlight sweeps across. pulse: the block fades in and out. none: static. Under reduced motion every block stays still.

• colordefault ""
  string

  Any CSS color for the block. Leave empty for the 5% foreground tint, which works on every surface in both themes. Set it on colored surfaces, e.g. a white tint on a brand banner.

• highlightdefault ""
  string

  Any CSS color for the shimmer band. Leave empty for a 7% foreground tint.

• speeddefault 1
  number

  Playback multiplier for shimmer and pulse: 0.5 is half speed, 2 twice as fast. One shimmer sweep takes 1.6s at 1, a pulse 2s. Clamped to 0.25..4.

• loadingdefault true
  boolean

  false renders the children instead, fading them in. Content that is already there on the first render (the server's too) shows without a fade.

• children
  ReactNode

  The real content. While loading it sits invisible and inert inside the block, so the block takes its exact size (a rect its corners too, a line draws a bar 70% as tall as the text box, like the presets); once loaded it shows in a wrapper that fades in. className lands on both, so pass layout classes like w-full or flex-1 once.

• widthdefault ""
  number | string

  px as a number (or a number-like string such as "120"), any other CSS length as a string. rect and line fill the row by default; a circle takes its size from width, or from height when width is missing.

• heightdefault ""
  number | string

  px as a number (or a number-like string), any other CSS length as a string. A rect is 96px tall by default, or follows an aspect-* class. Ignored by circles, which stay round.

• className
  string

  Extra classes for the block, merged last: size it with h-4 w-32, size-12, aspect-video.

Parts

FAQ

Used in

More React feedback components