Tabs

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

Make changes to your account here. Click save when you're done.

Name

Username

Installation

Usage

With Highlight

<Tabs>
  <TabsHighlight>
    <TabsList>
      <TabsHighlightItem value="account">
        <TabsTrigger value="account">Account</TabsTrigger>
      </TabsHighlightItem>
      <TabsHighlightItem value="password">
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsHighlightItem>
    </TabsList>
  </TabsHighlight>
  <TabContents>
    <TabsContent value="account">
      Make changes to your account here.
    </TabsContent>
    <TabsContent value="password">Change your password here.</TabsContent>
  </TabContents>
</Tabs>

Without Highlight

<Tabs>
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabContents>
    <TabsContent value="account">
      Make changes to your account here.
    </TabsContent>
    <TabsContent value="password">Change your password here.</TabsContent>
  </TabContents>
</Tabs>

API Reference

Radix UI API Reference - Tabs.Root

TabsHighlight

Animate UI API Reference - Highlight

Prop	Type	Default
`transition?`	`Transition`	`{ type: "spring", stiffness: 200, damping: 25 }`

TabsContents

Prop	Type	Default
`transition?`	`Transition`	`{ type: "spring", stiffness: 200, damping: 25 }`
`...props?`	`HTMLMotionProps<"div">`	-

TabsContent

Radix UI API Reference - Tabs.Content

Prop	Type	Default
`transition?`	`Transition`	`{ duration: 0.5, ease: "easeInOut" }`
`...props?`	`HTMLMotionProps<"div">`	-

Credits

Radix UI Tabs

Tabs

On this page