Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Account

Make changes to your account here. Click save when you're done.

Name

Username

Installation

bash

npm install @radix-ui/react-tabs

Usage

tsx

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

tsx

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Make changes to your account here.
  </TabsContent>
  <TabsContent value="password">
    Change your password here.
  </TabsContent>
</Tabs>

Examples

Default

Account

Make changes to your account here. Click save when you're done.

Name

Username

tsx

function TabsDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Tabs defaultValue="account">
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
        </TabsList>
        <TabsContent value="account">
          <Card>
            <CardHeader>
              <CardTitle>Account</CardTitle>
              <CardDescription>
                                 Make changes to your account here. Click save when you&apos;re done.
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-6">
              <div className="grid gap-3">
                <Label htmlFor="name">Name</Label>
                <Input id="name" defaultValue="Pedro Duarte" />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="username">Username</Label>
                <Input id="username" defaultValue="@peduarte" />
              </div>
            </CardContent>
            <CardFooter>
              <Button>Save changes</Button>
            </CardFooter>
          </Card>
        </TabsContent>
        <TabsContent value="password">
          <Card>
            <CardHeader>
              <CardTitle>Password</CardTitle>
              <CardDescription>
                Change your password here. After saving, you'll be logged out.
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-6">
              <div className="grid gap-3">
                <Label htmlFor="current">Current password</Label>
                <Input id="current" type="password" />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="new">New password</Label>
                <Input id="new" type="password" />
              </div>
            </CardContent>
            <CardFooter>
              <Button>Save password</Button>
            </CardFooter>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

With Icons

Profile Information

Update your profile information here.

Full Name

tsx

function TabsWithIconsDemo() {
  return (
    <div className="w-full max-w-md">
      <Tabs defaultValue="profile">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="profile" className="flex items-center gap-2">
            <User className="h-4 w-4" />
            Profile
          </TabsTrigger>
          <TabsTrigger value="billing" className="flex items-center gap-2">
            <CreditCard className="h-4 w-4" />
            Billing
          </TabsTrigger>
          <TabsTrigger value="settings" className="flex items-center gap-2">
            <Settings className="h-4 w-4" />
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="profile" className="mt-4">
          {/* Profile content */}
        </TabsContent>
        <TabsContent value="billing" className="mt-4">
          {/* Billing content */}
        </TabsContent>
        <TabsContent value="settings" className="mt-4">
          {/* Settings content */}
        </TabsContent>
      </Tabs>
    </div>
  )
}

Simple

Overview

Get a quick overview of your dashboard metrics and key performance indicators.

tsx

function SimpleTabsDemo() {
  return (
    <div className="w-full max-w-lg">
      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
          <TabsTrigger value="reports">Reports</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
        </TabsList>
        <TabsContent value="overview" className="mt-4">
          <div className="rounded-lg border p-4">
            <h3 className="text-lg font-semibold mb-2">Overview</h3>
            <p className="text-muted-foreground">
              Get a quick overview of your dashboard metrics and key performance indicators.
            </p>
          </div>
        </TabsContent>
        {/* Other tab contents */}
      </Tabs>
    </div>
  )
}

API Reference

Tabs

Prop	Type	Default	Description
`defaultValue`	`string`	-	The value of the tab that should be active when initially rendered.
`value`	`string`	-	The controlled value of the tab to activate.
`onValueChange`	`function`	-	Event handler called when the value changes.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the tabs.

TabsList

Prop	Type	Default	Description
`loop`	`boolean`	`true`	When true, keyboard navigation will loop from last tab to first, and vice versa.

TabsTrigger

Prop	Type	Default	Description
`value`	`string`	-	A unique value that associates the trigger with a content.
`disabled`	`boolean`	`false`	When true, prevents the user from interacting with the tab.

TabsContent

Prop	Type	Default	Description
`value`	`string`	-	A unique value that associates the content with a trigger.
`forceMount`	`boolean`	`false`	Used to force mounting when more control is needed.

External Documentation

Radix UI Tabs Documentation