A set of layered sections of content (tab panels) that display one panel at a time.
defaultStandard settings panels, navigation within a single dashboard workspace, signin/signup togglespillSubcategory filters (e.g. Inbox / Unread / Starred messages)underlineClean page-level navigation, document tabs, profile sectionsVisual style of the tabs.
Label for the first tab.
Label for the second tab.
Content for the first tab.
Content for the second tab.
import { Tabs, TabsList, TabsTrigger, TabsContent } from "nexoreui"
<Tabs defaultValue="tab1" className="w-full">
<TabsList>
<TabsTrigger value="tab1">Account</TabsTrigger>
<TabsTrigger value="tab2">Password</TabsTrigger>
</TabsList>
<TabsContent value="tab1">Make changes to your account here.</TabsContent>
<TabsContent value="tab2">Change your password here.</TabsContent>
</Tabs>| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | — | The value of the tab that should be active when initially rendered. |
| value | string | — | Controlled value of the active tab. |
| onValueChange | (value: string) => void | — | Callback triggered when the active tab changes. |
| variant | "default" | "pill" | "underline" | "default" | Visual style variant (applied to TabsList and TabsTrigger). |
role="tablist", role="tab", and role="tabpanel" attributes correctly linking labels.