Animate UI

Tabs

A component for toggling between related panels on the same page.

Made by imskyleen
Edit on GitHub

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

Installation

Usage

With Highlight

<Tabs>
  <TabsHighlight>
    <TabsList>
      <TabsHighlightItem value="account">
        <TabsTab value="account">Account</TabsTab>
      </TabsHighlightItem>
      <TabsHighlightItem value="password">
        <TabsTab value="password">Password</TabsTab>
      </TabsHighlightItem>
    </TabsList>
  </TabsHighlight>
  <TabsPanels>
    <TabsPanel value="account">Make changes to your account here.</TabsPanel>
    <TabsPanel value="password">Change your password here.</TabsPanel>
  </TabsPanels>
</Tabs>

Without Highlight

<Tabs>
  <TabsList>
    <TabsTab value="account">Account</TabsTab>
    <TabsTab value="password">Password</TabsTab>
  </TabsList>
  <TabsPanels>
    <TabsPanel value="account">Make changes to your account here.</TabsPanel>
    <TabsPanel value="password">Change your password here.</TabsPanel>
  </TabsPanels>
</Tabs>

API Reference

Tabs

Base UI API Reference - Tabs.Root

TabsHighlight

Animate UI API Reference - Highlight
PropTypeDefault
transition?
Transition
{ type: "spring", stiffness: 200, damping: 25 }

TabsHighlightItem

Animate UI API Reference - HighlightItem

TabsList

Base UI API Reference - Tabs.List

TabsTab

Base UI API Reference - Tabs.Tab

TabsPanels

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

TabsPanel

Base UI API Reference - Tabs.Panel
PropTypeDefault
transition?
Transition
{ duration: 0.5, ease: "easeInOut" }
...props?
HTMLMotionProps<"div">
-

Credits

Built by Skyleen. The source code is available on GitHub.