tabs-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-example",
  "title": "Tabs",
  "registryDependencies": [
    "button",
    "dropdown-menu",
    "tabs",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-nova/examples/tabs-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}