{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid",
  "type": "registry:ui",
  "title": "Bento Grid",
  "description": "Responsive bento grid layout and card container.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/starkui/bento-grid.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function BentoGrid({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface BentoCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string;\n  className?: string;\n  background?: React.ReactNode;\n  icon?: React.ReactNode;\n  description: string;\n  href?: string;\n  cta?: string;\n}\n\nexport function BentoCard({\n  name,\n  className,\n  background,\n  icon,\n  description,\n  href,\n  cta = \"Learn more\",\n  children,\n  ...props\n}: BentoCardProps) {\n  return (\n    <div\n      className={cn(\n        \"group relative flex flex-col justify-between overflow-hidden rounded-[2rem] border border-border/60 bg-background p-8 shadow-sm transition-all duration-300 hover:border-border hover:shadow-xl dark:hover:shadow-white/5\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-muted/30 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n      \n      {background && <div className=\"absolute inset-0 z-0\">{background}</div>}\n\n      <div className=\"relative z-10 flex flex-col gap-3\">\n        {icon && <div className=\"text-foreground/80 transition-transform group-hover:scale-110\">{icon}</div>}\n        <h3 className=\"text-xl font-bold tracking-tight text-foreground\">{name}</h3>\n        <p className=\"text-sm text-muted-foreground leading-relaxed\">{description}</p>\n      </div>\n\n      {children && <div className=\"relative z-10 my-4\">{children}</div>}\n\n      {href && (\n        <div className=\"relative z-10 mt-6 flex items-center gap-1.5 text-xs font-semibold text-foreground transition-all group-hover:translate-x-1\">\n          <span>{cta}</span>\n          <span>&rarr;</span>\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/bento-grid.tsx"
    }
  ]
}