Tabs

A set of layered sections of content that display one panel at a time.

navigation

tabs

sections

content

Preview

Account settings go here.

Variants

Simple tabs with basic content.

Account settings go here.

Code

TSX

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

export function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-full">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account settings go here.</TabsContent>
      <TabsContent value="password">Password settings go here.</TabsContent>
    </Tabs>
  )
}

API Reference

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	-	Callback invoked when the value changes.
orientation	horizontal \| vertical	horizontal	The orientation of the tabs.

View Full Documentation