{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid",
  "type": "registry:ui",
  "title": "Bento grid",
  "description": "A responsive bento grid for feature sections: tiles with icon, title, copy and a visual slot on a six column grid that collapses to one column on phones.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/bento-grid.tsx",
      "type": "registry:ui",
      "target": "components/ui/bento-grid.tsx",
      "content": "import * as React from \"react\"\nimport { BarChart3Icon, BellIcon, LockIcon, SparklesIcon, UsersIcon, ZapIcon, type LucideIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A responsive bento grid: tiles of different spans on a six column grid\n * that collapse to one column on phones. Each tile has an icon, title,\n * copy and an optional visual slot. Server component friendly, no motion.\n */\ntype BentoItem = {\n  title: string\n  description: string\n  icon?: LucideIcon\n  /** Column span on large screens, out of 6. */\n  span?: 2 | 3 | 4 | 6\n  /** Row span on large screens. */\n  rows?: 1 | 2\n  visual?: React.ReactNode\n  href?: string\n}\n\ntype BentoGridProps = { items?: BentoItem[]; className?: string }\n\nconst SPAN = { 2: \"lg:col-span-2\", 3: \"lg:col-span-3\", 4: \"lg:col-span-4\", 6: \"lg:col-span-6\" }\n\nconst DEMO: BentoItem[] = [\n  { title: \"Real time analytics\", description: \"Every chart updates as events arrive, with no refresh and no sampling.\", icon: BarChart3Icon, span: 4, rows: 2 },\n  { title: \"Instant alerts\", description: \"Get a message the moment a metric crosses a line you set.\", icon: BellIcon, span: 2 },\n  { title: \"Roles and access\", description: \"Invite the team and decide who sees what.\", icon: UsersIcon, span: 2 },\n  { title: \"SSO and audit logs\", description: \"SAML, SCIM and a full audit trail on every plan.\", icon: LockIcon, span: 3 },\n  { title: \"Automations\", description: \"Trigger workflows from any event without writing code.\", icon: ZapIcon, span: 3 },\n]\n\nfunction BentoGrid({ items = DEMO, className }: BentoGridProps) {\n  return (\n    <div data-slot=\"bento-grid\" className={cn(\"grid w-full grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-6 lg:auto-rows-[minmax(180px,auto)]\", className)}>\n      {items.map((it, i) => {\n        const Icon = it.icon ?? SparklesIcon\n        const Tag = it.href ? \"a\" : \"div\"\n        return (\n          <Tag\n            key={it.title}\n            {...(it.href ? { href: it.href } : {})}\n            className={cn(\n              \"group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-surface p-6 shadow-raised outline-none\",\n              it.href && \"transition-[border-color] hover:border-border-strong focus-visible:ring-2 focus-visible:ring-accent\",\n              SPAN[it.span ?? 2],\n              it.rows === 2 && \"lg:row-span-2\",\n              i === 0 && \"sm:col-span-2\",\n            )}\n          >\n            <span className=\"grid size-9 place-items-center rounded-xl bg-accent-soft text-accent-fg\">\n              <Icon className=\"size-[18px]\" strokeWidth={1.75} />\n            </span>\n            <h3 className=\"mt-4 text-base font-medium tracking-[-0.02em] text-fg\">{it.title}</h3>\n            <p className=\"mt-1.5 max-w-sm text-sm leading-[1.6] text-fg-muted\">{it.description}</p>\n            {it.visual ?? (it.rows === 2 ? <BentoChart /> : null)}\n          </Tag>\n        )\n      })}\n    </div>\n  )\n}\n\nfunction BentoChart() {\n  const bars = [32, 48, 40, 62, 55, 74, 68, 86, 80, 96]\n  return (\n    <div aria-hidden className=\"mt-auto flex h-40 items-end gap-2 pt-6\">\n      {bars.map((h, i) => (\n        <span key={i} className=\"flex-1 rounded-t-md bg-accent\" style={{ height: `${h}%`, opacity: 0.25 + (i / bars.length) * 0.75 }} />\n      ))}\n    </div>\n  )\n}\n\nexport { BentoGrid }\nexport type { BentoGridProps, BentoItem }\n"
    }
  ]
}