{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-tabs-8","type":"registry:block","title":"Tabs with icons and line variant","description":"Tabs with icons and line variant","dependencies":[],"registryDependencies":["@reui/badge","card","tabs"],"files":[{"path":"c-tabs-8.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst plans = [\n  {\n    id: \"starter\",\n    name: \"Starter\",\n    price: \"$9\",\n    description: \"For individuals and small projects\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"UserIcon\"\n        tabler=\"IconUser\"\n        hugeicons=\"UserIcon\"\n        phosphor=\"UserIcon\"\n        remixicon=\"RiUserLine\"\n        className=\"size-5\"\n      />\n    ),\n    tablerIcon: \"IconUser\",\n  },\n  {\n    id: \"pro\",\n    name: \"Pro\",\n    price: \"$29\",\n    description: \"For growing teams and businesses\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"ZapIcon\"\n        tabler=\"IconBolt\"\n        hugeicons=\"ZapIcon\"\n        phosphor=\"LightningIcon\"\n        remixicon=\"RiFlashlightLine\"\n        className=\"size-5\"\n      />\n    ),\n    tablerIcon: \"IconBolt\",\n  },\n  {\n    id: \"enterprise\",\n    name: \"Enterprise\",\n    price: \"$99\",\n    description: \"For large organizations\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"BuildingIcon\"\n        tabler=\"IconBuilding\"\n        hugeicons=\"Building01Icon\"\n        phosphor=\"BuildingsIcon\"\n        remixicon=\"RiBuildingLine\"\n        className=\"size-5\"\n      />\n    ),\n    tablerIcon: \"IconBuilding\",\n  },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-6\">\n      <Tabs defaultValue=\"projects\" orientation=\"vertical\" className=\"gap-5\">\n        <TabsList variant=\"line\" className=\"w-48 shrink-0\">\n          <TabsTrigger value=\"projects\" className=\"justify-start gap-2\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"FolderIcon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n              className=\"size-4\"\n            />\n            Projects\n            <Badge variant=\"secondary\" size=\"sm\" className=\"ml-auto\">\n              8\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"tasks\" className=\"justify-start gap-2\">\n            <IconPlaceholder\n              lucide=\"CheckSquareIcon\"\n              tabler=\"IconCheckbox\"\n              hugeicons=\"CheckListIcon\"\n              phosphor=\"CheckSquareIcon\"\n              remixicon=\"RiCheckboxLine\"\n              className=\"size-4\"\n            />\n            Tasks\n            <Badge variant=\"primary-light\" size=\"sm\" className=\"ml-auto\">\n              24\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"team\" className=\"justify-start gap-2\">\n            <IconPlaceholder\n              lucide=\"UsersIcon\"\n              tabler=\"IconUsers\"\n              hugeicons=\"UserGroupIcon\"\n              phosphor=\"UsersIcon\"\n              remixicon=\"RiGroupLine\"\n              className=\"size-4\"\n            />\n            Team\n          </TabsTrigger>\n          <TabsTrigger value=\"reports\" className=\"justify-start gap-2\">\n            <IconPlaceholder\n              lucide=\"FileTextIcon\"\n              tabler=\"IconFileText\"\n              hugeicons=\"File02Icon\"\n              phosphor=\"FileTextIcon\"\n              remixicon=\"RiFileTextLine\"\n              className=\"size-4\"\n            />\n            Reports\n          </TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"projects\">\n          <Card>\n            <CardContent>\n              <h3 className=\"text-foreground mb-2 font-semibold\">\n                Active Projects\n              </h3>\n              <p>8 projects are currently in progress across your workspace.</p>\n            </CardContent>\n          </Card>\n        </TabsContent>\n        <TabsContent value=\"tasks\">\n          <Card>\n            <CardContent>\n              <h3 className=\"text-foreground mb-2 font-semibold\">\n                Pending Tasks\n              </h3>\n              <p>24 tasks need your attention this week.</p>\n            </CardContent>\n          </Card>\n        </TabsContent>\n        <TabsContent value=\"team\">\n          <Card>\n            <CardContent>\n              <h3 className=\"text-foreground mb-2 font-semibold\">\n                Team Members\n              </h3>\n              <p>Manage your team and their access permissions.</p>\n            </CardContent>\n          </Card>\n        </TabsContent>\n        <TabsContent value=\"reports\">\n          <Card>\n            <CardContent>\n              <h3 className=\"text-foreground mb-2 font-semibold\">Reports</h3>\n              <p>View generated reports and export data.</p>\n            </CardContent>\n          </Card>\n        </TabsContent>\n      </Tabs>\n    </div>\n  )\n}","target":"components/examples/c-tabs-8.tsx"}],"meta":{"order":8,"gridSize":1}}