{
  "name": "bento-grid",
  "type": "registry:ui",
  "dependencies": [
    "@tabler/icons-react"
  ],
  "files": [
    {
      "path": "components/ui/bento-grid.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\nexport const BentoGrid = ({\n  className,\n  children,\n}: {\n  className?: string;\n  children?: React.ReactNode;\n}) => {\n  return (\n    <div\n      className={cn(\n        \"mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const BentoGridItem = ({\n  className,\n  title,\n  description,\n  header,\n  icon,\n}: {\n  className?: string;\n  title?: string | React.ReactNode;\n  description?: string | React.ReactNode;\n  header?: React.ReactNode;\n  icon?: React.ReactNode;\n}) => {\n  return (\n    <div\n      className={cn(\n        \"group/bento shadow-input row-span-1 flex flex-col justify-between space-y-4 rounded-xl border border-neutral-200 bg-white p-4 transition duration-200 hover:shadow-xl dark:border-white/[0.2] dark:bg-black dark:shadow-none\",\n        className,\n      )}\n    >\n      {header}\n      <div className=\"transition duration-200 group-hover/bento:translate-x-2\">\n        {icon}\n        <div className=\"mt-2 mb-2 font-sans font-bold text-neutral-600 dark:text-neutral-200\">\n          {title}\n        </div>\n        <div className=\"font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300\">\n          {description}\n        </div>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/bento-grid.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Bento Grid"
}