Tabs
Switch panels with an animated active pill.
Animated tabs
The active pill slides between tabs via Base UI's --active-tab-* variables.
The active pill slides between tabs. Arrow keys move between them.
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui";
<Tabs defaultValue="overview">
<TabsList>
<TabsTab value="overview">Overview</TabsTab>
<TabsTab value="tokens">Tokens</TabsTab>
<TabsTab value="components">Components</TabsTab>
</TabsList>
<TabsPanel value="overview">The active pill slides between tabs.</TabsPanel>
<TabsPanel value="tokens">Colors, radius, fonts and shadows.</TabsPanel>
<TabsPanel value="components">Accessible Base UI primitives.</TabsPanel>
</Tabs>