{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collection-categories",
  "type": "registry:block",
  "title": "Category tiles",
  "description": "Three category link tiles with a zooming render, mono count and an arrow that nudges on hover.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "collection",
    "any"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "collection/collection-categories.tsx",
      "content": "import { ArrowUpRight } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* Three category tiles. Each tile is one link: the render zooms, the arrow\n   nudges and the count sits in mono, all on the same hover. */\n\ntype Category = { title: string; count: number; image: string; href: string }\n\nexport function CollectionCategories({\n  categories = [\n    { title: \"Powders\", count: 12, image: \"/placeholder.webp\", href: \"#\" },\n    { title: \"Capsules & gummies\", count: 8, image: \"/placeholder.webp\", href: \"#\" },\n    { title: \"Drinks\", count: 4, image: \"/placeholder.webp\", href: \"#\" },\n  ],\n  className,\n}: {\n  categories?: Category[]\n  className?: string\n}) {\n  return (\n    <ul data-sk-section=\"collection\" data-sk-variant=\"collection-categories\" className={cn(\"grid gap-4 sm:grid-cols-3\", className)}>\n      {categories.map((c) => (\n        <li key={c.title}>\n          <a\n            href={c.href}\n            className=\"group flex h-full flex-col overflow-hidden rounded-sk-card border border-sk-line bg-sk-surface outline-none focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper\"\n          >\n            <div className=\"relative aspect-[4/3] overflow-hidden sm:aspect-[4/5]\">\n              <img\n                src={c.image}\n                alt=\"\"\n                loading=\"lazy\"\n                className=\"absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-sk-out group-hover:scale-[1.04] motion-reduce:group-hover:scale-100\"\n              />\n            </div>\n            <div className=\"flex items-center justify-between gap-4 border-t border-sk-line bg-sk-card px-5 py-4\">\n              <div>\n                <h3 className=\"font-sk-display text-xl font-semibold leading-[1.1] tracking-[-0.02em] text-sk-ink\">{c.title}</h3>\n                <p className=\"mt-1 font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted tabular-nums\">\n                  {c.count} {c.count === 1 ? \"product\" : \"products\"}\n                </p>\n              </div>\n              <span className=\"grid h-11 w-11 shrink-0 place-items-center rounded-full border border-sk-line text-sk-ink transition-[transform,background-color,color] duration-200 ease-sk-out group-hover:bg-sk-accent group-hover:text-sk-accent-ink\">\n                <ArrowUpRight\n                  size={18}\n                  aria-hidden\n                  className=\"transition-transform duration-200 ease-sk-out group-hover:-translate-y-0.5 group-hover:translate-x-0.5 motion-reduce:transform-none\"\n                />\n              </span>\n            </div>\n          </a>\n        </li>\n      ))}\n    </ul>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/collection/collection-categories.tsx"
    }
  ],
  "meta": {
    "section": "collection",
    "variant": "categories",
    "niche": [
      "any"
    ],
    "commerce": [
      "navigation"
    ],
    "previewHeight": 560
  }
}