{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loom-loader-demo",
  "type": "registry:example",
  "title": "Loom Loader Demo",
  "description": "The loader at three sizes, with a wider frame on the last.",
  "registryDependencies": [
    "@loomui/loom-loader"
  ],
  "files": [
    {
      "path": "registry/example/loom-loader-demo.tsx",
      "content": "import { LoomLoader } from \"@/registry/loomui/loom-loader\"\n\nconst SIZES = [\n  { label: \"Small\", className: \"size-6\", strands: 3, duration: 1400 },\n  { label: \"Default\", className: \"size-10\", strands: 5, duration: 1400 },\n  {\n    label: \"Wide and slow\",\n    className: \"text-accent size-16\",\n    strands: 7,\n    duration: 2000,\n  },\n]\n\nexport default function LoomLoaderDemo() {\n  return (\n    <div className=\"grid w-full max-w-md grid-cols-3 gap-4 sm:gap-8\">\n      {SIZES.map((size) => (\n        <div key={size.label} className=\"flex flex-col items-center gap-4\">\n          {/* A fixed slot so three different sizes share one baseline and the\n              labels below them line up. */}\n          <div className=\"grid h-16 place-items-center\">\n            <LoomLoader\n              className={size.className}\n              strands={size.strands}\n              duration={size.duration}\n            />\n          </div>\n          <span className=\"text-muted-foreground text-center text-xs text-balance\">\n            {size.label}\n          </span>\n        </div>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}