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

Your name is displayed on your profile.

Installation

The Tabs component is part of the Anya UI registry:


import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/src/registry/anya/ui/tabs";

Usage


<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

Your name is displayed on your profile.


import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/src/registry/anya/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/src/registry/anya/ui/card";
 
export function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <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're done.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <p className="text-sm font-medium">Name</p>
              <p className="text-sm text-muted-foreground">Your name is displayed on your profile.</p>
            </div>
          </CardContent>
        </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="space-y-2">
            <div className="space-y-1">
              <p className="text-sm font-medium">Current Password</p>
              <p className="text-sm text-muted-foreground">Enter your current password.</p>
            </div>
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  )
}

Line

Use the variant="line" prop on TabsList for a line style.

View your key metrics and recent project activity.


<Tabs defaultValue="overview" className="w-[400px]">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">View your key metrics and recent project activity.</TabsContent>
  <TabsContent value="analytics">Track progress across all your active projects.</TabsContent>
  <TabsContent value="reports">Generate detailed reports for your team.</TabsContent>
</Tabs>

Vertical

Use orientation="vertical" for vertical tabs.

Account

Make changes to your account here.


<Tabs defaultValue="account" orientation="vertical" className="w-[400px]">
  <TabsList className="flex-col h-auto">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Card>
      <CardHeader>
        <CardTitle>Account</CardTitle>
        <CardDescription>
          Make changes to your account here.
        </CardDescription>
      </CardHeader>
    </Card>
  </TabsContent>
  <TabsContent value="password">
    <Card>
      <CardHeader>
        <CardTitle>Password</CardTitle>
        <CardDescription>
          Change your password here.
        </CardDescription>
      </CardHeader>
    </Card>
  </TabsContent>
  <TabsContent value="notifications">
    <Card>
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>
          Manage your notification preferences.
        </CardDescription>
      </CardHeader>
    </Card>
  </TabsContent>
</Tabs>

Disabled

Home content


<Tabs defaultValue="home" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="home">Home</TabsTrigger>
    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
  </TabsList>
  <TabsContent value="home">Home content</TabsContent>
  <TabsContent value="disabled">This tab is disabled</TabsContent>
</Tabs>

Icons

Preview your changes here.


import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/src/registry/anya/ui/tabs";
import { AppWindowIcon, CodeIcon } from "lucide-react";
 
export function TabsIcons() {
  return (
    <Tabs defaultValue="preview" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="preview">
          <AppWindowIcon />
          Preview
        </TabsTrigger>
        <TabsTrigger value="code">
          <CodeIcon />
          Code
        </TabsTrigger>
      </TabsList>
      <TabsContent value="preview">Preview your changes here.</TabsContent>
      <TabsContent value="code">View the code here.</TabsContent>
    </Tabs>
  )
}

TabGroup

The TabGroup component is a convenience wrapper that simplifies creating tabs by accepting a tabs array prop.

Account

Manage your account settings and preferences.


import { TabGroup, TabsContent } from "@/src/registry/anya/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/src/registry/anya/ui/card";
import { UserIcon, SettingsIcon } from "lucide-react";
 
export function TabGroupDemo() {
  return (
    <TabGroup
      defaultValue="account"
      tabs={[
        { label: "Account", value: "account", icon: <UserIcon /> },
        { label: "Settings", value: "settings", icon: <SettingsIcon /> },
      ]}
      className="w-[400px]"
    >
      <TabsContent value="account">
        <Card>
          <CardHeader>
            <CardTitle>Account</CardTitle>
            <CardDescription>
              Manage your account settings and preferences.
            </CardDescription>
          </CardHeader>
        </Card>
      </TabsContent>
      <TabsContent value="settings">
        <Card>
          <CardHeader>
            <CardTitle>Settings</CardTitle>
            <CardDescription>
              Configure your application settings.
            </CardDescription>
          </CardHeader>
        </Card>
      </TabsContent>
    </TabGroup>
  )
}

TabGroup with Line Variant

View your key metrics and recent project activity.


<TabGroup
  defaultValue="overview"
  tabs={[
    { label: "Overview", value: "overview" },
    { label: "Analytics", value: "analytics" },
    { label: "Reports", value: "reports" },
  ]}
  tabListClassName="variant-line"
  className="w-[400px]"
>
  <TabsContent value="overview">View your key metrics and recent project activity.</TabsContent>
  <TabsContent value="analytics">Track progress across all your active projects.</TabsContent>
  <TabsContent value="reports">Generate detailed reports for your team.</TabsContent>
</TabGroup>

API Reference

Tabs

The root component that wraps all tab components.

Prop	Type	Default	Description
`defaultValue`	`string`	-	The value of the tab that should be active initially
`value`	`string`	-	The controlled value of the active tab
`onValueChange`	`(value: string) => void`	-	Callback fired when the active tab changes
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the tabs
`class`	`string`	-	Additional CSS classes
`...props`	`React.ComponentProps<typeof TabsPrimitive.Root>`	-	All Radix UI tabs root props

TabsList

The container for tab triggers.

Prop	Type	Default	Description
`variant`	`"default" \| "line"`	`"default"`	The visual style variant
`class`	`string`	-	Additional CSS classes
`...props`	`React.ComponentProps<typeof TabsPrimitive.List>`	-	All Radix UI tabs list props

TabsTrigger

The button that activates a tab.

Prop	Type	Default	Description
`value`	`string`	-	The value of the tab (required)
`disabled`	`boolean`	`false`	Whether the tab trigger is disabled
`class`	`string`	-	Additional CSS classes
`...props`	`React.ComponentProps<typeof TabsPrimitive.Trigger>`	-	All Radix UI tabs trigger props

TabsContent

The content panel for a tab.

Prop	Type	Default	Description
`value`	`string`	-	The value of the tab this content belongs to (required)
`class`	`string`	-	Additional CSS classes
`...props`	`React.ComponentProps<typeof TabsPrimitive.Content>`	-	All Radix UI tabs content props

TabGroup

A convenience component that simplifies creating tabs by accepting a tabs array prop.

Prop	Type	Default	Description
`tabs`	`Array<{ label: string; value: string; icon?: React.ReactNode }>`	-	Array of tab configurations (required)
`defaultValue`	`string`	-	The value of the tab that should be active initially
`value`	`string`	-	The controlled value of the active tab
`onChange`	`(value: string) => void`	-	Callback fired when the active tab changes
`children`	`React.ReactNode`	-	The tab content panels (TabsContent components)
`className`	`string`	-	Additional CSS classes for the Tabs root
`tabListClassName`	`string`	-	Additional CSS classes for the TabsList

Exports

Tabs - The root Tabs component
TabsList - The TabsList component
TabsTrigger - The TabsTrigger component
TabsContent - The TabsContent component
TabGroup - The TabGroup convenience component
tabsListVariants - The CVA function for custom styling