Tabs

Tabbed interface with keyboard navigation.

Switch between tabs. Arrow keys work too.

Installation

npx @noarka/cli add tabs

Usage

tsx

import { Tabs, TabsList, TabsPanel, TabsTab } from "@noarka/ui";

tsx

<Tabs defaultValue="account">  <TabsList>    <TabsTab value="account">Account</TabsTab>    <TabsTab value="billing">Billing</TabsTab>  </TabsList>  <TabsPanel value="account">    <p className="pt-3 text-sm text-muted-foreground">Manage your profile details.</p>  </TabsPanel>  <TabsPanel value="billing">    <p className="pt-3 text-sm text-muted-foreground">View invoices and update payment.</p>  </TabsPanel></Tabs>

Examples

Disabled tab

Disabled tabs are skipped by clicks and keyboard navigation.

Project overview.

Custom tab content

Tabs accept rich children like count badges.

No unread messages.

Vertical

Stack the list beside the panels with a vertical orientation.

General preferences.

API reference

Tabs

Prop	Type	Default
`value` Controlled active tab. Use with onValueChange.	`string`	`-`
`defaultValue` Initially active tab when uncontrolled.	`string`	`-`
`onValueChange` Called when the active tab changes.	`(value: string) => void`	`-`
`orientation` Layout direction. Vertical uses up/down arrow keys.	`"horizontal" \| "vertical"`	`"horizontal"`

TabsList

Prop	Type	Default
`render` Polymorphic render prop.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default list styles.	`string`	`-`

TabsTab

Prop	Type	Default
`value`Required Unique tab identifier. Shows the matching panel.	`string`	`-`
`disabled` Disable the tab. Skipped by keyboard navigation.	`boolean`	`false`
`render` Polymorphic render prop. Accepts custom tab content like count badges.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default tab styles.	`string`	`-`

TabsPanel

Prop	Type	Default
`value`Required Renders when the tab with the same value is active.	`string`	`-`
`keepMounted` Keep the panel in the DOM while inactive.	`boolean`	`false`
`render` Polymorphic render prop.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default panel styles.	`string`	`-`