{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid",
  "type": "registry:ui",
  "title": "Bento Grid",
  "description": "Bento grid is a layout used to showcase the features of a product in a simple and elegant way.",
  "dependencies": [
    "@radix-ui/react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/magicui/bento-grid.tsx",
      "content": "import { type ComponentPropsWithoutRef, type ReactNode } from \"react\"\nimport { ArrowRightIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ninterface BentoGridProps extends ComponentPropsWithoutRef<\"div\"> {\n  children: ReactNode\n  className?: string\n}\n\ninterface BentoCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  name: string\n  className: string\n  background: ReactNode\n  Icon: React.ElementType\n  description: string\n  href: string\n  cta: string\n}\n\nconst BentoGrid = ({ children, className, ...props }: BentoGridProps) => {\n  return (\n    <div\n      className={cn(\n        \"grid w-full auto-rows-[22rem] grid-cols-3 gap-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nconst BentoCard = ({\n  name,\n  className,\n  background,\n  Icon,\n  description,\n  href,\n  cta,\n  ...props\n}: BentoCardProps) => (\n  <div\n    key={name}\n    className={cn(\n      \"group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl\",\n      // light styles\n      \"bg-background [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n      // dark styles\n      \"dark:bg-background transform-gpu dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] dark:[border:1px_solid_rgba(255,255,255,.1)]\",\n      className\n    )}\n    {...props}\n  >\n    <div>{background}</div>\n    <div className=\"p-4\">\n      <div className=\"pointer-events-none z-10 flex transform-gpu flex-col gap-1 transition-all duration-300 lg:group-hover:-translate-y-10\">\n        <Icon className=\"h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75\" />\n        <h3 className=\"text-xl font-semibold text-neutral-700 dark:text-neutral-300\">\n          {name}\n        </h3>\n        <p className=\"max-w-lg text-neutral-400\">{description}</p>\n      </div>\n\n      <div\n        className={cn(\n          \"pointer-events-none flex w-full translate-y-0 transform-gpu flex-row items-center transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 lg:hidden\"\n        )}\n      >\n        <Button\n          variant=\"link\"\n          asChild\n          size=\"sm\"\n          className=\"pointer-events-auto p-0\"\n        >\n          <a href={href}>\n            {cta}\n            <ArrowRightIcon className=\"ms-2 h-4 w-4 rtl:rotate-180\" />\n          </a>\n        </Button>\n      </div>\n    </div>\n\n    <div\n      className={cn(\n        \"pointer-events-none absolute bottom-0 hidden w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 lg:flex\"\n      )}\n    >\n      <Button\n        variant=\"link\"\n        asChild\n        size=\"sm\"\n        className=\"pointer-events-auto p-0\"\n      >\n        <a href={href}>\n          {cta}\n          <ArrowRightIcon className=\"ms-2 h-4 w-4 rtl:rotate-180\" />\n        </a>\n      </Button>\n    </div>\n\n    <div className=\"pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/3 group-hover:dark:bg-neutral-800/10\" />\n  </div>\n)\n\nexport { BentoCard, BentoGrid }\n",
      "type": "registry:ui"
    }
  ]
}