Tabs

Installation

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 
export default function Home() {
  return (
    <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>
  );
}

Props

Tabs

Radix UI Props

Tabs Root Props

• defaultValue: string - The value of the tab that should be active when initially rendered
• value: string - The controlled value of the currently active tab
• onValueChange: (value: string) => void - Event handler called when the value changes
• orientation: 'horizontal' | 'vertical' - The orientation of the tabs
• dir: 'ltr' | 'rtl' - The reading direction
• activationMode: 'automatic' | 'manual' - Whether to auto-activate tabs on focus

TabsList Props

• Standard Radix UI TabsList props

TabsTrigger Props

• value: string (required) - A unique value for the tab
• disabled: boolean - When true, prevents the user from interacting with the tab

TabsContent Props

• value: string (required) - A unique value that associates the content with a trigger
• forceMount: boolean - Force mounting when more control is needed