Tabs

Switch between views with a spring-loaded indicator that glides to the active tab.

NavigationRadix Tabs

Profile

Your name and avatar are visible to everyone in the workspace.

Playground

Tweak the props, the preview and the code follow.

Traffic is up 18% this week, mostly from organic search.

Props

variant

icons

disable last

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="alerts">Alerts</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
</Tabs>

Installation

npx @plumsydev/plum-ui add tabs

Usage

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

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">…</TabsContent>
  <TabsContent value="password">…</TabsContent>
</Tabs>

Examples

Underline

variant="underline" on the list for page-level navigation.

Traffic is up 12% week over week, driven by organic search.

With icons

API Reference

Tabs

Accepts every Radix Tabs.Root prop.

Prop	Type	Default
`defaultValue` Initially active tab.	`string`	`—`
`value / onValueChange` Controlled state.	`string`	`—`
`orientation` Layout and keyboard navigation axis.	`"horizontal" \| "vertical"`	`"horizontal"`

TabsList

Prop	Type	Default
`variant` Segmented pill or underline style.	`"pill" \| "underline"`	`"pill"`

TabsTrigger

Prop	Type	Default
`value*` Value of the tab it activates.	`string`	`—`
`disabled` Prevents activation.	`boolean`	`false`

Notes

Each Tabs instance scopes its indicator with useId(), so several tab sets on one page never fight over the animation.

PreviousTable NextTag Input