{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-demo-vertical",
  "type": "registry:example",
  "title": "Bento Vertical Demo",
  "description": "Example showing a vertical bento grid layout.",
  "dependencies": [
    "@radix-ui/react-icons"
  ],
  "registryDependencies": [
    "@magicui/bento-grid"
  ],
  "files": [
    {
      "path": "registry/example/bento-demo-vertical.tsx",
      "content": "import {\n  BellIcon,\n  CalendarIcon,\n  FileTextIcon,\n  GlobeIcon,\n  InputIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { BentoCard, BentoGrid } from \"@/registry/magicui/bento-grid\"\n\nconst features = [\n  {\n    Icon: FileTextIcon,\n    name: \"Save your files\",\n    description: \"We automatically save your files as you type.\",\n    href: \"/\",\n    cta: \"Learn more\",\n    background: (\n      <img alt=\"\" className=\"absolute -top-20 -right-20 opacity-60\" />\n    ),\n    className: \"lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3\",\n  },\n  {\n    Icon: InputIcon,\n    name: \"Full text search\",\n    description: \"Search through all your files in one place.\",\n    href: \"/\",\n    cta: \"Learn more\",\n    background: (\n      <img alt=\"\" className=\"absolute -top-20 -right-20 opacity-60\" />\n    ),\n    className: \"lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3\",\n  },\n  {\n    Icon: GlobeIcon,\n    name: \"Multilingual\",\n    description: \"Supports 100+ languages and counting.\",\n    href: \"/\",\n    cta: \"Learn more\",\n    background: (\n      <img alt=\"\" className=\"absolute -top-20 -right-20 opacity-60\" />\n    ),\n    className: \"lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4\",\n  },\n  {\n    Icon: CalendarIcon,\n    name: \"Calendar\",\n    description: \"Use the calendar to filter your files by date.\",\n    href: \"/\",\n    cta: \"Learn more\",\n    background: (\n      <img alt=\"\" className=\"absolute -top-20 -right-20 opacity-60\" />\n    ),\n    className: \"lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2\",\n  },\n  {\n    Icon: BellIcon,\n    name: \"Notifications\",\n    description:\n      \"Get notified when someone shares a file or mentions you in a comment.\",\n    href: \"/\",\n    cta: \"Learn more\",\n    background: (\n      <img alt=\"\" className=\"absolute -top-20 -right-20 opacity-60\" />\n    ),\n    className: \"lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4\",\n  },\n]\n\nexport default function BentoDemo() {\n  return (\n    <BentoGrid className=\"lg:grid-rows-3\">\n      {features.map((feature) => (\n        <BentoCard key={feature.name} {...feature} />\n      ))}\n    </BentoGrid>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}