import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
<Tabs defaultValue="general">
<TabsList>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="team">Team</TabsTrigger>
<TabsTrigger value="billing">Billing</TabsTrigger>
</TabsList>
<TabsContent value="general">Company name, logo and time zone.</TabsContent>
<TabsContent value="team">8 members, 2 pending invites.</TabsContent>
<TabsContent value="billing">Next invoice on Nov 1, 2026.</TabsContent>
</Tabs>
Examples
Example source
var P = window.PUI, h = React.createElement;
ReactDOM.createRoot(document.getElementById('preview')).render(h(P.Tabs, { defaultValue: 'general' },
h(P.TabsList, null, h(P.TabsTrigger, { value: 'general' }, 'General'), h(P.TabsTrigger, { value: 'team' }, 'Team'), h(P.TabsTrigger, { value: 'billing' }, 'Billing')),
h(P.TabsContent, { value: 'general' }, 'Company name, logo and time zone.'),
h(P.TabsContent, { value: 'team' }, '8 members, 2 pending invites.'),
h(P.TabsContent, { value: 'billing' }, 'Next invoice on Nov 1, 2026.')));
Usage
What you provide
defaultValue (or value + onValueChange), one TabsTrigger and one TabsContent per value.
Two to six tabs with one- or two-word labels.
To move between pages (URLs), use navigation links, not Tabs.
Accessibility
Use tabs only to switch groups of content on the same page, when a simpler layout won't do; on small screens consider stacking the content.
Tab lands on the active tab; ← / → move between tabs and wrap from last to first; the next Tab goes into the open panel.
Panels open automatically as the arrows move (the recommended mode). Manual activation (activationMode="manual", then Enter / Space) is possible but not recommended.
Screen readers hear the tab name, the tab role, its position (1 of 3) and whether it is selected.
Adapted from Magoo 1.6.0 by Marcelo Sales: Tabs (abas). Magoo is educational guidance; test the behavior in your implementation.