Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Props

Tabs

Prop	Type	Default	Description
`size`	`'sm' \| 'base' \| 'lg'`	`'base'`	Controls spacing of list and triggers
...Radix props	`ComponentProps<typeof TabsPrimitive.Root>`	-	All Radix Tabs root props

TabsList

Prop	Type	Default	Description
inherits	`size` from context	`'base'`	Receives `size` from `Tabs`

TabsTrigger

Prop	Type	Default	Description
`value`	`string`	-	Unique value identifying the tab
inherits	`size` from context	`'base'`	Receives `size` from `Tabs`

TabsContent

Prop	Type	Default	Description
`value`	`string`	-	Value of the corresponding trigger

Types

interface TabsProps extends ComponentProps<typeof TabsPrimitive.Root>, VariantProps<typeof tabsVariants> {
  size?: "sm" | "base" | "lg";
}

type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;

Usage

Tab1

Tab2

Tab3

Tab1

Tab2

Tab3

Tab1

Tab2

Tab3

<Tabs defaultValue="taba1" size="sm">
  <TabsList>
    <TabsTrigger value="taba1">Small</TabsTrigger>
    <TabsTrigger value="taba2">Tab</TabsTrigger>
    <TabsTrigger value="taba3">Example</TabsTrigger>
  </TabsList>
  <TabsContent value="taba1">Tab1</TabsContent>
  <TabsContent value="taba2">Tab2</TabsContent>
  <TabsContent value="taba3">Tab3</TabsContent>
</Tabs>
<Tabs defaultValue="tabb1" size="base">
  <TabsList>
    <TabsTrigger value="tabb1">Standard</TabsTrigger>
    <TabsTrigger value="tabb2">Tab</TabsTrigger>
    <TabsTrigger value="tabb3">Example</TabsTrigger>
  </TabsList>
  <TabsContent value="tabb1">Tab1</TabsContent>
  <TabsContent value="tabb2">Tab2</TabsContent>
  <TabsContent value="tabb3">Tab3</TabsContent>
</Tabs>
<Tabs defaultValue="tabc1" size="lg">
  <TabsList>
    <TabsTrigger value="tabc1">Large</TabsTrigger>
    <TabsTrigger value="tabc2">Tab</TabsTrigger>
    <TabsTrigger value="tabc3">Example</TabsTrigger>
  </TabsList>
  <TabsContent value="tabc1">Tab1</TabsContent>
  <TabsContent value="tabc2">Tab2</TabsContent>
  <TabsContent value="tabc3">Tab3</TabsContent>
</Tabs>

Examples

<Tabs defaultValue="a" size="sm">
  <TabsList>
    <TabsTrigger value="a">A</TabsTrigger>
    <TabsTrigger value="b">B</TabsTrigger>
  </TabsList>
  <TabsContent value="a">Content A</TabsContent>
  <TabsContent value="b">Content B</TabsContent>
</Tabs>