Tabs

Composable tab navigation with dot notation and panel content.

Preview

Manage your account settings and preferences.

Installation

npx drivn add tabs

Usage

1 import { Tabs } from "@/components/ui/tabs"
2 
3 export default function Page() {
4   return (
5     <Tabs defaultValue="overview">
6       <Tabs.List>
7         <Tabs.Tab value="overview">Overview</Tabs.Tab>
8         <Tabs.Tab value="usage">Usage</Tabs.Tab>
9         <Tabs.Tab value="api">API</Tabs.Tab>
10       </Tabs.List>
11       <Tabs.Panel value="overview">
12         Overview content here.
13       </Tabs.Panel>
14       <Tabs.Panel value="usage">
15         Usage content here.
16       </Tabs.Panel>
17       <Tabs.Panel value="api">
18         API content here.
19       </Tabs.Panel>
20     </Tabs>
21   )
22 }

API Reference

Tabs

Prop	Type	Default	Description
`defaultValue`	string	—	Initial active tab value for uncontrolled mode
`value`	string	—	Controlled active tab value
`onChange`	(value: string) => void	—	Callback fired when the active tab changes
`className`	string	—	Additional CSS classes to apply
`children`	ReactNode	—	Tabs sub-components (List, Tab, Panel)

Tabs.Tab

Prop	Type	Default	Description
`value`	string	—	Unique value identifying this tab
`children`	ReactNode	—	Tab label content

Tabs.Panel

Prop	Type	Default	Description
`value`	string	—	Value matching the corresponding Tab
`children`	ReactNode	—	Panel content displayed when tab is active

1	import { Tabs } from "@/components/ui/tabs"
2
3	export default function Page() {
4	return (
5	<Tabs defaultValue="overview">
6	<Tabs.List>
7	<Tabs.Tab value="overview">Overview</Tabs.Tab>
8	<Tabs.Tab value="usage">Usage</Tabs.Tab>
9	<Tabs.Tab value="api">API</Tabs.Tab>
10	</Tabs.List>
11	<Tabs.Panel value="overview">
12	Overview content here.
13	</Tabs.Panel>
14	<Tabs.Panel value="usage">
15	Usage content here.
16	</Tabs.Panel>
17	<Tabs.Panel value="api">
18	API content here.
19	</Tabs.Panel>
20	</Tabs>
21	)
22	}