{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-reveal",
  "type": "registry:component",
  "title": "Grid reveal",
  "description": "A grid of labelled tiles that slide up in quick succession as the section scrolls into view. Pass any list of strings; it honors reduced motion.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/grid-reveal.tsx",
      "type": "registry:ui",
      "target": "components/ui/grid-reveal.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction GridReveal({\n  items = [\"Buttons\", \"Tables\", \"AI chat\", \"Billing\", \"Admin\", \"Heroes\", \"Pricing\", \"Showcase\"],\n  className,\n}: {\n  items?: string[]\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  return (\n    <section data-slot=\"grid-reveal\" data-tier=\"premium\" className={cn(\"grid grid-cols-2 gap-3 sm:grid-cols-4\", className)}>\n      {items.map((item, i) => (\n        <motion.div\n          key={item}\n          initial={reduce ? false : { y: 16 }}\n          whileInView={{ y: 0 }}\n          viewport={{ once: true, amount: 0.3 }}\n          transition={{ delay: i * 0.04, duration: 0.28, ease: [0.2, 0, 0, 1] }}\n          className=\"rounded-xl border border-border bg-surface px-4 py-6 text-center shadow-highlight\"\n        >\n          <p className=\"text-sm font-medium text-fg\">{item}</p>\n          <p className=\"mt-1 font-mono text-[10px] text-fg-muted\">0{i + 1}</p>\n        </motion.div>\n      ))}\n    </section>\n  )\n}\nexport { GridReveal }\n"
    }
  ]
}