ComponentsNavigation

Tabs

Switch between related views. Line and segmented styles.

Playground

Deploys, traffic and errors at a glance.

<Tabs defaultValue="overview">
  <TabsList aria-label="Project">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">...</TabsContent>
  <TabsContent value="activity">...</TabsContent>
  <TabsContent value="settings">...</TabsContent>
</Tabs>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Tabs, TabsList, TabsTrigger, TabsContent } from "junco";

<Tabs defaultValue="overview">
  <TabsList aria-label="Project">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">...</TabsContent>
  <TabsContent value="activity">...</TabsContent>
</Tabs>

Examples#

With counts#

Badges sit inside triggers. Disabled tabs are skipped by the arrow keys.

12 open issues.

API reference#

`Tabs`#

value / defaultValue: Controlled or initial tab.; string
onValueChange: Called when the tab changes.; (value: string) => void
variant: Underline for page sections, segmented for compact view switches.; "line" | "segmented"; Default: "line"
orientation: Which arrow keys move between tabs.; "horizontal" | "vertical"; Default: "horizontal"
activationMode: Manual means arrows move focus and Enter/Space activates.; "automatic" | "manual"; Default: "automatic"

Prop	Type	Default
`value / defaultValue` Controlled or initial tab.	`string`	`–`
`onValueChange` Called when the tab changes.	`(value: string) => void`	`–`
`variant` Underline for page sections, segmented for compact view switches.	`"line" \| "segmented"`	`"line"`
`orientation` Which arrow keys move between tabs.	`"horizontal" \| "vertical"`	`"horizontal"`
`activationMode` Manual means arrows move focus and Enter/Space activates.	`"automatic" \| "manual"`	`"automatic"`

`TabsTrigger`#

value: Required. Matches a TabsContent.; string
disabled: Skipped by the keyboard.; boolean; Default: false

Prop	Type	Default
`value` Required. Matches a TabsContent.	`string`	`–`
`disabled` Skipped by the keyboard.	`boolean`	`false`

`TabsContent`#

value: Required. Shown when its trigger is active.; string

Prop	Type	Default
`value` Required. Shown when its trigger is active.	`string`	`–`

Accessibility#

Keyboard interactions
Key	Action
`Tab`	Moves focus to the active tab, then into the panel.
`←→`	Moves to the previous or next tab.
`HomeEnd`	Moves to the first or last tab.

Follows the WAI-ARIA tabs pattern: tablist, tab and tabpanel roles with aria-selected and aria-controls.
Give the TabsList an aria-label that says what the tabs switch between.
The active tab is marked by an underline or raised surface and bolder text, not color alone.

<Tabs defaultValue="overview"> <TabsList aria-label="Project"> <TabsTrigger value="overview">Overview</TabsTrigger> <TabsTrigger value="activity">Activity</TabsTrigger> <TabsTrigger value="settings">Settings</TabsTrigger> </TabsList> <TabsContent value="overview">...</TabsContent> <TabsContent value="activity">...</TabsContent> <TabsContent value="settings">...</TabsContent> </Tabs>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Tabs, TabsList, TabsTrigger, TabsContent } from "junco";

<Tabs defaultValue="overview">
  <TabsList aria-label="Project">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">...</TabsContent>
  <TabsContent value="activity">...</TabsContent>
</Tabs>

API reference#

`Tabs`#

value / defaultValue: Controlled or initial tab.; string
onValueChange: Called when the tab changes.; (value: string) => void
variant: Underline for page sections, segmented for compact view switches.; "line" | "segmented"; Default: "line"
orientation: Which arrow keys move between tabs.; "horizontal" | "vertical"; Default: "horizontal"
activationMode: Manual means arrows move focus and Enter/Space activates.; "automatic" | "manual"; Default: "automatic"

Prop	Type	Default
`value / defaultValue` Controlled or initial tab.	`string`	`–`
`onValueChange` Called when the tab changes.	`(value: string) => void`	`–`
`variant` Underline for page sections, segmented for compact view switches.	`"line" \| "segmented"`	`"line"`
`orientation` Which arrow keys move between tabs.	`"horizontal" \| "vertical"`	`"horizontal"`
`activationMode` Manual means arrows move focus and Enter/Space activates.	`"automatic" \| "manual"`	`"automatic"`

`TabsTrigger`#

value: Required. Matches a TabsContent.; string
disabled: Skipped by the keyboard.; boolean; Default: false

Prop	Type	Default
`value` Required. Matches a TabsContent.	`string`	`–`
`disabled` Skipped by the keyboard.	`boolean`	`false`

`TabsContent`#

value: Required. Shown when its trigger is active.; string

Prop	Type	Default
`value` Required. Shown when its trigger is active.	`string`	`–`

Accessibility#

Keyboard interactions
Key	Action
`Tab`	Moves focus to the active tab, then into the panel.
`←→`	Moves to the previous or next tab.
`HomeEnd`	Moves to the first or last tab.

Follows the WAI-ARIA tabs pattern: tablist, tab and tabpanel roles with aria-selected and aria-controls.

Give the TabsList an aria-label that says what the tabs switch between.

The active tab is marked by an underline or raised surface and bolder text, not color alone.

Playground#

Usage#

Examples#

With counts#

API reference#

Tabs#

TabsTrigger#

TabsContent#

Accessibility#

Playground#

Usage#

Examples#

With counts#

API reference#

Tabs#

TabsTrigger#

TabsContent#

Accessibility#

`Tabs`#

`TabsTrigger`#

`TabsContent`#

`Tabs`#

`TabsTrigger`#

`TabsContent`#