Component

Skeleton

A placeholder shown while content loads.

Installation

npx shadcn@latest add @doffy/skeleton

Or, without the registry in components.json:

npx shadcn@latest add https://ui.doffy.com/r/skeleton.json

Usage

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

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

Source

Show skeleton.tsx

import { cn } from "cn"

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("animate-pulse rounded-none bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }