{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid-demo",
  "title": "Bento Grid Demo",
  "description": "Example showing a bento grid layout with variable spanning.",
  "registryDependencies": [
    "https://pioneerui.com/r/bento-grid"
  ],
  "files": [
    {
      "path": "registry/example/bento-grid-demo.tsx",
      "content": "import { BentoGrid, BentoCard } from \"../pioneerui/bento-grid\"\n\nconst StarIcon = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} className=\"h-4 w-4\">\n    <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\n  </svg>\n)\n\nconst CodeIcon = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} className=\"h-4 w-4\">\n    <polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/>\n  </svg>\n)\n\nconst LayersIcon = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} className=\"h-4 w-4\">\n    <polygon points=\"12 2 2 7 12 12 22 7 12 2\"/>\n    <polyline points=\"2 17 12 22 22 17\"/>\n    <polyline points=\"2 12 12 17 22 12\"/>\n  </svg>\n)\n\nexport default function BentoGridDemo() {\n  return (\n    <div className=\"p-6\">\n      <BentoGrid>\n        <BentoCard\n          colSpan={2}\n          name=\"Component Library\"\n          description=\"25+ animated, accessible components ready to copy and install.\"\n          icon={<LayersIcon />}\n          background={\n            <div className=\"absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-purple-500/10\" />\n          }\n        />\n        <BentoCard\n          name=\"Open Source\"\n          description=\"Free to use, fully customizable MIT licensed.\"\n          icon={<StarIcon />}\n        />\n        <BentoCard\n          name=\"Copy & Paste\"\n          description=\"No npm install needed — just copy the code.\"\n          icon={<CodeIcon />}\n        />\n        <BentoCard\n          colSpan={2}\n          name=\"Design System\"\n          description=\"Consistent tokens, dark mode, and Tailwind CSS 4 support.\"\n          background={\n            <div className=\"absolute inset-0 bg-gradient-to-br from-pink-500/10 to-orange-500/10\" />\n          }\n        />\n      </BentoGrid>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/bento-grid-demo.tsx"
    }
  ],
  "type": "registry:example"
}