Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time. Perfect for organizing complex interfaces in React applications with Next.js, TypeScript, and Tailwind CSS.

You know how some interfaces have so much content that showing everything at once would be overwhelming? Tabs let users focus on one section while keeping other options visible and accessible, like file tabs in your code editor or browser tabs you probably have too many of right now.

Basic form tabs

Account and password settings organized cleanly:

Loading component...

"use client"import { Button } from "@/components/ui/button"import {  Card,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from "@/components/ui/card"import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,} from "@/components/ui/tabs"export default function TabsDemo() {  return (    <Tabs defaultValue="account" className="w-[400px]">      <TabsList className="grid w-full grid-cols-2">        <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">              <Label htmlFor="name">Name</Label>              <Input id="name" defaultValue="Pedro Duarte" />            </div>            <div className="space-y-1">              <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="space-y-2">            <div className="space-y-1">              <Label htmlFor="current">Current password</Label>              <Input id="current" type="password" />            </div>            <div className="space-y-1">              <Label htmlFor="new">New password</Label>              <Input id="new" type="password" />            </div>          </CardContent>          <CardFooter>            <Button>Save password</Button>          </CardFooter>        </Card>      </TabsContent>    </Tabs>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Simple two-tab layout with forms inside cards. This free open source React component handles all the keyboard navigation and ARIA attributes so screen readers understand the tab structure.

npx shadcn@latest add tabs

Why tabs improve user experience

Tabs solve real interface problems:

Reduced cognitive load - Users see one focused section at a time
Clear navigation - All options visible without scrolling
Contextual grouping - Related content stays together
Space efficiency - Multiple panels in the same area
State preservation - Content persists when switching tabs
Familiar pattern - Users already know how tabs work

Common tab patterns

Settings panel with icon navigation:

Loading component...

"use client"import { Button } from "@/components/ui/button"import {  Card,  CardContent,  CardDescription,  CardHeader,  CardTitle,} from "@/components/ui/card"import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,} from "@/components/ui/tabs"import { ScrollArea } from "@/components/ui/scroll-area"import { User, Shield, Bell, Palette, Globe } from "lucide-react"import { Switch } from "@/components/ui/switch"import { Label } from "@/components/ui/label"export default function TabsVertical() {  return (    <Tabs defaultValue="profile" orientation="vertical" className="flex gap-4 w-full max-w-3xl">      <TabsList className="flex flex-col h-auto w-[200px]">        <TabsTrigger value="profile" className="w-full justify-start">          <User className="mr-2 h-4 w-4" />          Profile        </TabsTrigger>        <TabsTrigger value="security" className="w-full justify-start">          <Shield className="mr-2 h-4 w-4" />          Security        </TabsTrigger>        <TabsTrigger value="notifications" className="w-full justify-start">          <Bell className="mr-2 h-4 w-4" />          Notifications        </TabsTrigger>        <TabsTrigger value="appearance" className="w-full justify-start">          <Palette className="mr-2 h-4 w-4" />          Appearance        </TabsTrigger>        <TabsTrigger value="language" className="w-full justify-start">          <Globe className="mr-2 h-4 w-4" />          Language        </TabsTrigger>      </TabsList>            <div className="flex-1">        <TabsContent value="profile">          <Card>            <CardHeader>              <CardTitle>Profile Settings</CardTitle>              <CardDescription>                Manage your public profile information              </CardDescription>            </CardHeader>            <CardContent className="space-y-4">              <p className="text-sm text-muted-foreground">                Update your profile details that are visible to other users.              </p>              <Button>Edit Profile</Button>            </CardContent>          </Card>        </TabsContent>                <TabsContent value="security">          <Card>            <CardHeader>              <CardTitle>Security Settings</CardTitle>              <CardDescription>                Manage your password and authentication              </CardDescription>            </CardHeader>            <CardContent className="space-y-4">              <div className="flex items-center justify-between">                <Label htmlFor="2fa">Two-factor authentication</Label>                <Switch id="2fa" />              </div>              <Button variant="outline">Change Password</Button>            </CardContent>          </Card>        </TabsContent>                <TabsContent value="notifications">          <Card>            <CardHeader>              <CardTitle>Notification Preferences</CardTitle>              <CardDescription>                Choose what notifications you receive              </CardDescription>            </CardHeader>            <CardContent className="space-y-4">              <div className="flex items-center justify-between">                <Label htmlFor="email-notif">Email notifications</Label>                <Switch id="email-notif" defaultChecked />              </div>              <div className="flex items-center justify-between">                <Label htmlFor="push-notif">Push notifications</Label>                <Switch id="push-notif" />              </div>            </CardContent>          </Card>        </TabsContent>                <TabsContent value="appearance">          <Card>            <CardHeader>              <CardTitle>Appearance Settings</CardTitle>              <CardDescription>                Customize how the app looks              </CardDescription>            </CardHeader>            <CardContent className="space-y-4">              <div className="flex items-center justify-between">                <Label htmlFor="dark-mode">Dark mode</Label>                <Switch id="dark-mode" />              </div>              <div className="flex items-center justify-between">                <Label htmlFor="compact">Compact view</Label>                <Switch id="compact" />              </div>            </CardContent>          </Card>        </TabsContent>                <TabsContent value="language">          <Card>            <CardHeader>              <CardTitle>Language & Region</CardTitle>              <CardDescription>                Set your language and regional preferences              </CardDescription>            </CardHeader>            <CardContent>              <p className="text-sm text-muted-foreground">                Choose your preferred language and regional format settings.              </p>            </CardContent>          </Card>        </TabsContent>      </div>    </Tabs>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Underline style with badges

Modern navigation with indicators:

Loading component...

"use client"import { AppWindowIcon, CodeIcon, Layers, Settings, Users } from "lucide-react"import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,} from "@/components/ui/tabs"import { Badge } from "@/components/ui/badge"export default function TabsUnderline() {  return (    <div className="w-full max-w-3xl">      <Tabs defaultValue="overview" className="w-full">        <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">          <TabsTrigger             value="overview"            className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"          >            <Layers className="mr-2 h-4 w-4" />            Overview          </TabsTrigger>          <TabsTrigger             value="analytics"            className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"          >            Analytics            <Badge variant="secondary" className="ml-2">              12            </Badge>          </TabsTrigger>          <TabsTrigger             value="code"            className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"          >            <CodeIcon className="mr-2 h-4 w-4" />            Code          </TabsTrigger>          <TabsTrigger             value="team"            className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"          >            <Users className="mr-2 h-4 w-4" />            Team          </TabsTrigger>          <TabsTrigger             value="settings"            className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"          >            <Settings className="mr-2 h-4 w-4" />            Settings          </TabsTrigger>        </TabsList>                <TabsContent value="overview" className="mt-6">          <div className="space-y-4">            <h3 className="text-lg font-semibold">Project Overview</h3>            <p className="text-sm text-muted-foreground">              Welcome to your project dashboard. Here you can see a summary of your project's status,              recent activity, and quick actions to manage your workflow.            </p>            <div className="grid gap-4 md:grid-cols-3">              <div className="rounded-lg border p-4">                <AppWindowIcon className="mb-2 h-8 w-8 text-primary" />                <h4 className="font-semibold">Active Tasks</h4>                <p className="text-2xl font-bold">24</p>              </div>              <div className="rounded-lg border p-4">                <Users className="mb-2 h-8 w-8 text-primary" />                <h4 className="font-semibold">Team Members</h4>                <p className="text-2xl font-bold">12</p>              </div>              <div className="rounded-lg border p-4">                <CodeIcon className="mb-2 h-8 w-8 text-primary" />                <h4 className="font-semibold">Commits</h4>                <p className="text-2xl font-bold">847</p>              </div>            </div>          </div>        </TabsContent>                <TabsContent value="analytics" className="mt-6">          <div className="space-y-4">            <h3 className="text-lg font-semibold">Analytics Dashboard</h3>            <p className="text-sm text-muted-foreground">              Track your project metrics, performance indicators, and user engagement statistics.            </p>          </div>        </TabsContent>                <TabsContent value="code" className="mt-6">          <div className="space-y-4">            <h3 className="text-lg font-semibold">Code Repository</h3>            <p className="text-sm text-muted-foreground">              Browse your codebase, view recent commits, and manage pull requests.            </p>          </div>        </TabsContent>                <TabsContent value="team" className="mt-6">          <div className="space-y-4">            <h3 className="text-lg font-semibold">Team Management</h3>            <p className="text-sm text-muted-foreground">              Manage team members, assign roles, and track individual contributions.            </p>          </div>        </TabsContent>                <TabsContent value="settings" className="mt-6">          <div className="space-y-4">            <h3 className="text-lg font-semibold">Project Settings</h3>            <p className="text-sm text-muted-foreground">              Configure project preferences, integrations, and security settings.            </p>          </div>        </TabsContent>      </Tabs>    </div>  )}

These examples show tabs in real scenarios - settings panels, dashboards, navigation bars. Each pattern serves different interface needs while maintaining consistent interaction patterns.

Perfect for content organization

Tabs work best when you have distinct content sections that users don't need to see simultaneously. Settings screens, multi-step forms, dashboard views, documentation sections, profile pages. Much cleaner than accordion or long scrolling pages when content is truly separate.

Built on Radix UI Tabs primitive. Full TypeScript support. Styled with Tailwind CSS to match the shadcn design system.

API Reference

The root container that holds all tab components.

Prop	Type	Default	Description
`defaultValue`	`string`	-	The value of the tab that should be active when initially rendered (uncontrolled)
`value`	`string`	-	The controlled value of the tab to activate
`onValueChange`	`(value: string) => void`	-	Event handler called when the active tab changes
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the tabs
`dir`	`"ltr" \| "rtl"`	`"ltr"`	Reading direction of the tabs
`activationMode`	`"automatic" \| "manual"`	`"automatic"`	Whether tabs are activated on focus or require clicking
`className`	`string`	-	Additional CSS classes

TabsList

Container for the tab triggers.

Prop	Type	Default	Description
`loop`	`boolean`	`true`	When true, keyboard navigation will loop from last to first and vice versa
`className`	`string`	-	Additional CSS classes

TabsTrigger

The button that activates its associated content panel.

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

TabsContent

The content panel associated with a trigger.

Prop	Type	Default	Description
`value`	`string`	-	The value that associates the content with a trigger
`forceMount`	`boolean`	-	Used to force mounting when more control is needed
`className`	`string`	-	Additional CSS classes

Data Attributes

Components automatically apply data attributes for styling:

Component	Attribute	Values	Description
All	`[data-orientation]`	`"horizontal"` \| `"vertical"`	The orientation
TabsTrigger	`[data-state]`	`"active"` \| `"inactive"`	Whether the tab is selected
TabsTrigger	`[data-disabled]`	Present when disabled	Applied when disabled
TabsContent	`[data-state]`	`"active"` \| `"inactive"`	Whether the content is visible

Full keyboard support for accessibility:

Key	Description
`Tab`	When focus moves to tabs, focuses the active trigger. When a trigger is focused, moves focus to active content
`Arrow Down`	Moves focus to next trigger (vertical orientation) and activates it
`Arrow Right`	Moves focus to next trigger (horizontal orientation) and activates it
`Arrow Up`	Moves focus to previous trigger (vertical orientation) and activates it
`Arrow Left`	Moves focus to previous trigger (horizontal orientation) and activates it
`Home`	Moves focus to first trigger and activates it
`End`	Moves focus to last trigger and activates it

Activation Modes

Tabs support two activation modes:

Automatic (default) - Panel changes when tab receives focus via keyboard navigation
Manual - Panel only changes when clicked or activated with Enter/Space keys

Controlled vs Uncontrolled

Tabs can manage their own state (uncontrolled) or be controlled by parent component state. The examples above demonstrate both patterns - check the preview code to see state management implementations.

Common patterns

The examples above demonstrate various tab patterns including:

Icons and text - Clear visual indicators with descriptive labels
Badges and indicators - Show counts or status information
Full-width layouts - Evenly distributed tab triggers
Underline styling - Modern border-based visual design
Vertical orientation - Sidebar-style navigation for settings
Grouped sections - Organized with separators and logical grouping

Check the preview examples above to see these patterns in action with full interactivity.

Accessibility Features

Built-in accessibility support includes:

ARIA pattern - Follows WAI-ARIA tabs design pattern
Keyboard navigation - Full keyboard support with arrow keys
Focus management - Proper focus handling and indicators
Screen reader support - Semantic HTML and ARIA attributes
Roving tabindex - Only active tab is in tab sequence
Orientation awareness - Arrow keys adapt to orientation
Loop navigation - Optional wraparound at list ends

Design tips for better tabs

Keep these principles in mind when using tabs:

Label clearly - Tab labels should be short and descriptive
Logical order - Arrange tabs by importance or workflow
Visual feedback - Active tab should be clearly distinguished
Consistent height - Keep tab panels similar height to avoid jumps
Mobile consideration - Test horizontal scrolling on small screens
Icon usage - Icons can help but shouldn't replace text labels
Loading states - Show loading in panels, not on triggers
Deep linking - Consider URL updates for shareable tab states
Keyboard users - Test navigation without mouse
Content persistence - Maintain form state when switching tabs

Tabs

Basic form tabs

Why tabs improve user experience

Common tab patterns

Vertical sidebar navigation

Underline style with badges

Perfect for content organization

API Reference

Tabs

TabsList

TabsTrigger

TabsContent

Data Attributes

Keyboard Navigation

Activation Modes

Controlled vs Uncontrolled

Common patterns

Accessibility Features

Design tips for better tabs

On this page

Tabs

Reactbutton

Reactcard

Reactinput

Reactlabel

Reacttabs

Reactbutton

Reactcard

Reacttabs

Reactscroll-area

Reactswitch

Reactlabel

Reacttabs

Reactbadge

On this page