{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-13",
  "title": "Vertical Tabs",
  "description": "Tabs with vertical orientation",
  "registryDependencies": [
    "tabs"
  ],
  "files": [
    {
      "path": "src/components/customized/tabs/tabs-13.tsx",
      "content": "import { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/registry/ui/tabs\";\n\nconst tabs = [\n  {\n    name: \"Home\",\n    value: \"home\",\n  },\n  {\n    name: \"Profile\",\n    value: \"profile\",\n  },\n  {\n    name: \"Messages\",\n    value: \"messages\",\n  },\n  {\n    name: \"Settings\",\n    value: \"settings\",\n  },\n];\n\nexport default function VerticalTabsDemo() {\n  return (\n    <Tabs\n      className=\"flex w-full max-w-md flex-row items-start justify-center gap-4\"\n      defaultValue={tabs[0].value}\n      orientation=\"vertical\"\n    >\n      <TabsList className=\"grid h-auto w-fit shrink-0 grid-cols-1 gap-1\">\n        {tabs.map((tab) => (\n          <TabsTrigger className=\"ps-2.5\" key={tab.value} value={tab.value}>\n            {tab.name}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      <div className=\"flex h-40 w-full max-w-xs items-center justify-center rounded-md border font-medium text-muted-foreground\">\n        {tabs.map((tab) => (\n          <TabsContent\n            className=\"flex h-full items-center justify-center\"\n            key={tab.value}\n            value={tab.value}\n          >\n            {tab.name} Content\n          </TabsContent>\n        ))}\n      </div>\n    </Tabs>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}