Skeleton

Loading placeholder for text, media, and layout scaffolding.

Installation

npx shadcn@latest add @iconiq/skeleton

File Structure

Usage

"use client";

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

export function SkeletonPreview() {
  return (
    <div
      aria-busy="true"
      aria-label="Loading profile"
      className="w-full max-w-sm rounded-lg bg-card p-4"
    >
      <div className="flex items-center gap-3">
        <Skeleton className="h-11 w-11" rounded="full" />
        <div className="flex-1 space-y-2">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-3 w-24" rounded="sm" />
        </div>
      </div>

      <div className="mt-5 space-y-2.5">
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-[92%]" />
        <Skeleton className="h-3 w-[78%]" />
      </div>
    </div>
  );
}

Props

Props
Description

Skeleton

variant

Chooses between the moving shimmer sweep and a softer opacity fade.

Type "shimmer" | "fade"·Default shimmer

rounded

Chooses the corner radius utility applied to the placeholder surface.

Type "none" | "sm" | "md" | "lg" | "full"·Default md

animate

Controls whether the selected animation variant is rendered. Set it to false for a static loading block.

Type boolean·Default true

duration

Animation cycle duration in seconds. Defaults to 1.6s for shimmer and 2.4s for fade.

Type number·Default 1.6

decorative

When true, the skeleton is hidden from assistive tech so grouped placeholders do not repeat loading announcements.

Type boolean·Default true

label

Accessible label used when `decorative={false}`. Pass `null` to force a hidden decorative skeleton.

Type string | null

className

Merged onto the root div so you can control width, height, spacing, colors, and any extra local styling.

Type string

HTML div props

Standard div attributes such as style, data-*, aria-*, id, and event handlers are forwarded to the root element.

Type HTMLAttributes<HTMLDivElement>

Preset helpers

SkeletonAvatar

Renders a circular `size-10` avatar placeholder.

Type Component

SkeletonText

Renders a `h-3` text-line placeholder.

Type Component

SkeletonButton

Renders a `h-9 w-24` button placeholder with `rounded="lg"`.

Type Component

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: none.

No runtime dependencies beyond React.

Requires the standard shadcn `cn` helper from `@/lib/utils` (clsx + tailwind-merge).

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.