Skip to main content
Tabs component preview (light)
  • Location: sabo/src/components/ui/tabs.tsx

​
When to use

  • Organize related content into multiple panels without navigating away.
  • Use when content sections are distinct but related (e.g., Overview, Settings, History).

​
Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export function Example() {
  return (
    <Tabs defaultValue="a">
      <TabsList>
        <TabsTrigger value="a">A</TabsTrigger>
        <TabsTrigger value="b">B</TabsTrigger>
      </TabsList>
      <TabsContent value="a">Panel A</TabsContent>
      <TabsContent value="b">Panel B</TabsContent>
    </Tabs>
  );
}

​
Key props

​
Tabs.defaultValue | value
string
Initial or controlled active tab value.
​
TabsTrigger.value
string
Associated value to activate a tab.
​
TabsContent.value
string
Content shown when the matching value is active.
This component forwards all props from Radix Tabs primitives (Root/List/Trigger/Content). Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/tabs

​
Styling tip

Keep tab labels concise and use subtle styling for a professional look. 
<TabsList className="rounded-lg">
  <TabsTrigger value="a">Overview</TabsTrigger>
</TabsList>

​
Accessibility

  • Tab navigation with arrow keys and Enter/Space to activate.
  • Only the active TabsContent is visible; others are hidden but remain in the DOM.
  • Use descriptive labels for triggers to convey content clearly.