Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Overview
View your key metrics and recent project activity. Track progress across all your active projects.
You have 12 active projects and 3 pending tasks.
Installation
Usage
<Tabs defaultValue="account" className="w-[400px]">
<Tabs.List>
<Tabs.Trigger value="account"> {"Account"->React.string} </Tabs.Trigger>
<Tabs.Trigger value="password"> {"Password"->React.string} </Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account"> {"Make changes to your account here."->React.string} </Tabs.Content>
<Tabs.Content value="password"> {"Change your password here."->React.string} </Tabs.Content>
</Tabs>Examples
Line
Use the variant=Line prop on TabsList for a line style.
Vertical
Use orientation="vertical" for vertical tabs.
Disabled
Icons
API Reference
See the Base UI Tabs documentation.