{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-17",
  "title": "Vertical Bordered Tabs",
  "description": "Vertical tabs with borders",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "tabs"
  ],
  "files": [
    {
      "path": "src/components/customized/tabs/tabs-17.tsx",
      "content": "import { Bot, Settings, User } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/registry/ui/tabs\";\n\nconst tabs = [\n  {\n    value: \"profile\",\n    icon: User,\n  },\n  {\n    value: \"chat\",\n    icon: Bot,\n  },\n  {\n    value: \"settings\",\n    icon: Settings,\n  },\n];\n\nconst VerticalBorderedTabs = () => {\n  return (\n    <Tabs\n      className=\"flex w-full flex-row items-start justify-center gap-2\"\n      defaultValue={tabs[0].value}\n      orientation=\"vertical\"\n    >\n      <TabsList className=\"flex h-auto shrink-0 flex-col divide-y border p-0\">\n        {tabs.map((item) => (\n          <TabsTrigger\n            className={cn(\n              \"h-10 rounded-none bg-background px-2.5 py-2 first:rounded-t-md last:rounded-b-md\",\n              \"data-[state=active]:bg-primary data-[state=active]:text-primary-foreground\"\n            )}\n            key={item.value}\n            value={item.value}\n          >\n            <item.icon className=\"h-5 w-5\" />\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      <div className=\"flex aspect-14/9 w-full max-w-60 grow items-center justify-center rounded-lg border p-6\">\n        {tabs.map((item) => (\n          <TabsContent key={item.value} value={item.value}>\n            <div className=\"mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted\">\n              <item.icon />\n            </div>\n            <p className=\"mt-4 text-center font-medium text-lg text-muted-foreground capitalize tracking-tight\">\n              {item.value}\n            </p>\n          </TabsContent>\n        ))}\n      </div>\n    </Tabs>\n  );\n};\n\nexport default VerticalBorderedTabs;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}