{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "skeleton",
  "title": "Skeleton",
  "type": "registry:primitives",
  "description": "Animated placeholder shapes that preview the layout of cards and tables while data is loading.",
  "dependencies": [],
  "usage": "import { CardSkeleton } from \"@etherealui/react\"\n\nexport function SkeletonDemo() {\n  return <CardSkeleton className=\"w-80\" />\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/skeleton.tsx",
      "target": "components/ui/skeleton.tsx",
      "type": "registry:primitives",
      "content": "import * as React from \"react\"\nimport { cn } from \"../utils/cn\"\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"animate-pulse rounded-md bg-zinc-200/80 dark:bg-zinc-800\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardSkeleton({ className }: { className?: string }) {\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-zinc-200 bg-white p-5 space-y-4 dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between\">\n        <Skeleton className=\"h-4 w-28\" />\n        <Skeleton className=\"h-5 w-14 rounded-full\" />\n      </div>\n      <Skeleton className=\"h-8 w-36\" />\n      <div className=\"space-y-2 pt-2\">\n        <Skeleton className=\"h-2.5 w-full\" />\n        <Skeleton className=\"h-2.5 w-4/5\" />\n      </div>\n    </div>\n  )\n}\n\nfunction TableRowSkeleton({ rows = 4 }: { rows?: number }) {\n  return (\n    <div className=\"w-full rounded-xl border border-zinc-200 bg-white divide-y divide-zinc-200 dark:border-zinc-800 dark:bg-zinc-900 dark:divide-zinc-800\">\n      {Array.from({ length: rows }).map((_, idx) => (\n        <div key={idx} className=\"flex items-center justify-between px-4 py-3 gap-4\">\n          <div className=\"flex items-center gap-3\">\n            <Skeleton className=\"h-8 w-8 rounded-full\" />\n            <div className=\"space-y-1.5\">\n              <Skeleton className=\"h-3.5 w-32\" />\n              <Skeleton className=\"h-2.5 w-24\" />\n            </div>\n          </div>\n          <Skeleton className=\"h-5 w-16 rounded-md\" />\n          <Skeleton className=\"h-3.5 w-20\" />\n          <Skeleton className=\"h-7 w-7 rounded-md\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport { Skeleton, CardSkeleton, TableRowSkeleton }\n"
    }
  ]
}