Skeleton

Installation

Copy the source into components/ui/skeleton.tsx. Registry items that depend on it install it automatically.

components/ui/skeleton.tsx

Usage

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

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton className="size-10 rounded-full" />
      <Skeleton className="h-4 w-40" />
    </div>
  );
}

Examples

Card

Compose skeleton blocks into the layout the data will fill; the closer the shapes, the calmer the swap.

API Reference

Skeleton

Renders a pulsing div; the size comes entirely from className.

SkeletonProps

className ?: string: Width, height, and radius of the placeholder.