Toucan

Add it to your project

Eject the complete tabs group, then import from its generated local barrel. The copied source and CSS belong to your application.

bash

pnpm exec toucan eject tabs

bash

npx toucan eject tabs

app.tsx

import { Tab, TabList, TabPanel, Tabs } from '@/components/toucan/tabs';

Use when

Peer sections share one context and only one should be visible at a time.

Avoid when

Sections need independent URLs or must be read in sequence.

Example

Overview content here.

API reference

Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.

TabTabListTabPanelTabs

Tab

Props type: TabProps

Name	Type	Default	Required	Description
`disabled`	`boolean`	`false`	No	Prevents interaction when true.
`value`	`string`	—	Required	Controlled value.

Also accepts the native button attributes that are not replaced by a Toucan prop.

TabList

Props type: TabListProps

No Toucan-specific props.

Also accepts the native div attributes that are not replaced by a Toucan prop.

TabPanel

Props type: TabPanelProps

Name	Type	Default	Required	Description
`value`	`string`	—	Required	Controlled value.

Also accepts the native div attributes that are not replaced by a Toucan prop.

Tabs

Props type: TabsProps

Name	Type	Default	Required	Description
`defaultValue`	`string`	`''`	No	Initial value when the component is uncontrolled.
`onChange`	`(value: string) => void`	`undefined`	No	Called when the value changes.
`orientation`	`"horizontal" \| "vertical"`	`'horizontal'`	No	Horizontal or vertical orientation.
`value`	`string`	`undefined`	No	Controlled value.

Also accepts the native div attributes that are not replaced by a Toucan prop.

Type exports

TabListProps, TabPanelProps, TabProps, TabsProps

Accessibility

Implements tablist, tab, and tabpanel relationships with arrow-key navigation.

Token families

tabsfocus

Related components

Accordion