Skeleton

Use to show a placeholder while content is loading.

import { Skeleton } from "@/registry/base/ui/skeleton";

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

Installation

npx shadcn@latest add https://sevenui.dev/r/skeleton.json

Usage

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

<Skeleton className="h-4 w-40" />;

API reference

Skeleton

Extends div — no props beyond it. Size it with className to match the content it stands in for.