{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-03",
  "title": "Separated Tabs",
  "description": "Tabs with separated style",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "tabs",
    "button"
  ],
  "files": [
    {
      "path": "src/components/customized/tabs/tabs-03.tsx",
      "content": "import { Copy } from \"lucide-react\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/registry/ui/tabs\";\n\nconst tabs = [\n  {\n    name: \"pnpm\",\n    value: \"pnpm\",\n    content: \"pnpm dlx shadcn@latest add tabs\",\n  },\n  {\n    name: \"npm\",\n    value: \"npm\",\n    content: \"npx shadcn@latest add tabs\",\n  },\n  {\n    name: \"yarn\",\n    value: \"yarn\",\n    content: \"npx shadcn@latest add tabs\",\n  },\n  {\n    name: \"bun\",\n    value: \"bun\",\n    content: \"bunx --bun shadcn@latest add tabs\",\n  },\n];\n\nexport default function TabsSeparatedDemo() {\n  return (\n    <Tabs className=\"w-full max-w-xs\" defaultValue={tabs[0].value}>\n      <TabsList className=\"gap-1 bg-background p-0 group-data-horizontal/tabs:h-7\">\n        {tabs.map((tab) => (\n          <TabsTrigger\n            className=\"data-[state=active]:bg-primary data-[state=active]:text-primary-foreground\"\n            key={tab.value}\n            value={tab.value}\n          >\n            <code className=\"text-[13px]\">{tab.name}</code>\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      {tabs.map((tab) => (\n        <TabsContent key={tab.value} value={tab.value}>\n          <div className=\"flex h-10 items-center justify-between gap-2 rounded-md border pr-1.5 pl-3\">\n            <code className=\"text-[13px]\">{tab.content}</code>\n            <Button className=\"h-7 w-7\" size=\"icon\" variant=\"secondary\">\n              <Copy className=\"h-3.5! w-3.5!\" />\n            </Button>\n          </div>\n        </TabsContent>\n      ))}\n    </Tabs>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}