Skip to main content

Tabs

Navigation
Stable

Tabbed navigation with 4 visual variants (default, ghost, line, nav). Includes ScrollableTabsList for overflow-scrolling tab bars.

Quick Import
Full Documentation
import { Tabs } from "@cohere-ai/waypoint-ui/tabs";

Live Preview

Loading Tabs...
Open in StorybookOpen in v0View Docs

Props

NameTypeDefaultDescription
variant'default' | 'ghost' | 'line' | 'nav''default'Visual style applied to list and triggers
valuestring-Controlled active tab
defaultValuestring-Default active tab
onValueChangefunction-Callback on tab change

Examples

Default Tabs

Standard tabs with two content panels

1
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@cohere-ai/waypoint-ui/tabs';
2
 
3
<Tabs defaultValue="account">
4
  <TabsList>
5
    <TabsTrigger value="account">Account</TabsTrigger>
6
    <TabsTrigger value="password">Password</TabsTrigger>
7
  </TabsList>
8
  <TabsContent value="account">Account settings here.</TabsContent>
9
  <TabsContent value="password">Password settings here.</TabsContent>
10
</Tabs>

Line Variant Tabs

Navigation-style tabs with underline indicator

1
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@cohere-ai/waypoint-ui/tabs';
2
 
3
<Tabs variant="line" defaultValue="overview">
4
  <TabsList>
5
    <TabsTrigger value="overview">Overview</TabsTrigger>
6
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
7
  </TabsList>
8
  <TabsContent value="overview">Overview content</TabsContent>
9
  <TabsContent value="analytics">Analytics content</TabsContent>
10
</Tabs>

Accessibility

WCAG AA

Keyboard Navigation

Arrow keys navigate between tabs. Enter/Space activates.

Found an Issue?

If you've encountered a bug or have feedback about the Tabs component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Was this page helpful?

Your feedback helps us improve our documentation.

Need Help?

Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.