Navigation

Tabs

A compound tabs component with full roving-tabindex keyboard navigation. Inactive panels unmount, unlike Accordion.

TabsTabsListTabsTriggerTabsPanel

Preview

Update your name, email, and profile photo.

Usage

tsx

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@vesture/react";

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="security">Security</TabsTrigger>
  </TabsList>
  <TabsPanel value="account">Account settings…</TabsPanel>
  <TabsPanel value="security">Security settings…</TabsPanel>
</Tabs>

Behavior

ArrowRight/ArrowDown → next tab, ArrowLeft/ArrowUp → previous (looping), Home/End → first/last.
Navigation both focuses and activates the target tab.
Controlled (value/onValueChange) or uncontrolled (defaultValue).

Props

Tabs

Prop	Type	Default	Description
defaultValue	string	""	Uncontrolled initial tab.
value	string	—	Controlled selected tab.
onValueChange	(value: string) => void	—	Fires on tab change.

TabsList

Prop	Type	Default	Description
...rest	HTMLAttributes<HTMLDivElement>	—	Spread onto the role="tablist" <div>; merges a custom onKeyDown that drives arrow/Home/End navigation ahead of any handler you pass.

TabsTrigger

Prop	Type	Default	Description
value	string	—	Required. Matches a TabsPanel's value.
...rest	ButtonHTMLAttributes<HTMLButtonElement>	—	Spread onto the trigger <button> — e.g. disabled works via native button semantics.

TabsPanel

Prop	Type	Default	Description
value	string	—	Required. Unmounted while not selected.
...rest	HTMLAttributes<HTMLDivElement>	—	Spread onto the panel <div>.