Tabs

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/tabs

Installing Tabs also installs Segmented Control, which it shares sizes and styles with.

UsageCopy Anchor Link

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

<Tabs defaultValue="account">
  <TabsList>
    <TabsTab value="account">Account</TabsTab>
    <TabsTab value="password">Password</TabsTab>
  </TabsList>
  <TabsPanel value="account">Account settings</TabsPanel>
  <TabsPanel value="password">Password settings</TabsPanel>
</Tabs>;

Use Tabs when each option shows its own panel. For a choice without panels, like a filter, use Segmented Control.

TabsTrigger and TabsContent are exported as aliases of TabsTab and TabsPanel.

UnderlineCopy Anchor Link

VerticalCopy Anchor Link

Set orientation="vertical". The arrow keys follow the orientation.

SizesCopy Anchor Link

API referenceCopy Anchor Link

Tabs wraps Base UI Tabs. Each part accepts the props of its Base UI counterpart.

TabsList also takes: