Skeleton

Show a placeholder while content is loading.

Installation

Add the skeleton component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/skeleton.json

Usage

tsx

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

Examples

Default

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

<div className="flex items-center gap-3">
  <Skeleton className="size-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-40" />
    <Skeleton className="h-4 w-28" />
  </div>
</div>