Tabs

A set of layered panels, one visible at a time.

Update your name and email.

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

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-full max-w-sm">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsTrigger value="team">Team</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="text-sm text-muted-foreground">
        Update your name and email.
      </TabsContent>
      <TabsContent value="password" className="text-sm text-muted-foreground">
        Change your password.
      </TabsContent>
      <TabsContent value="team" className="text-sm text-muted-foreground">
        Manage who has access to this workspace.
      </TabsContent>
    </Tabs>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/tabs.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Tabs imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Update your name and email.</TabsContent>
  <TabsContent value="password">Change your password.</TabsContent>
</Tabs>

API Reference

Name	Type	Default	Description
defaultValue	string	—	Initially selected tab value (uncontrolled).
value	string	—	Controlled selected tab value.
onValueChange	(value: string) => void	—	Called when the selected tab changes.
orientation	'horizontal' \| 'vertical'	'horizontal'	Layout and arrow-key direction of the tab list.