Introduction

Skeleton components act as visual placeholders while content is loading. They reduce perceived load time and prevent layout shifts.

Installation

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

Usage

<Skeleton className="h-4 w-[200px]" />

Examples

Default

SkeletonDefault

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

export default function Component() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  );
}

Card Skeleton

SkeletonCard

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

export default function Component() {
  return (
    <div className="flex w-[300px] flex-col space-y-3">
      <Skeleton className="h-[125px] w-full rounded-xl" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-3/4" />
      </div>
    </div>
  );
}

List Skeleton

SkeletonList

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

export default function Component() {
  return (
    <div className="w-full max-w-sm space-y-4">
      {[1, 2, 3].map((i) => (
        <div key={i} className="flex items-center space-x-4">
          <Skeleton className="size-10 rounded-full" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-4 w-3/4" />
            <Skeleton className="h-3 w-1/2" />
          </div>
        </div>
      ))}
    </div>
  );
}

API Reference

Skeleton

Renders a <div> with pulse animation. Use className to control width, height, and border-radius.

Prop	Type	Default	Description
`className`	`string`	—	Size and shape via Tailwind classes

Skeleton

On this page