Tabs

Tab bar with keyboard navigation and panel content switching. Uses a compound component pattern: Tabs > TabList + TabPanel.

Import

import { Tabs, TabList, Tab, TabPanel } from "silvery"

Usage

<Tabs defaultValue="general">
  <TabList>
    <Tab value="general">General</Tab>
    <Tab value="advanced">Advanced</Tab>
    <Tab value="about">About</Tab>
  </TabList>
  <TabPanel value="general">
    <Text>General settings...</Text>
  </TabPanel>
  <TabPanel value="advanced">
    <Text>Advanced settings...</Text>
  </TabPanel>
  <TabPanel value="about">
    <Text>About this app...</Text>
  </TabPanel>
</Tabs>

Components

Tabs (Root)

Prop	Type	Default	Description
defaultValue	string	—	Default active tab (uncontrolled)
value	string	—	Active tab (controlled)
onChange	(value: string) => void	—	Called when active tab changes
isActive	boolean	true	Whether keyboard input is captured
children	ReactNode	required	TabList + TabPanel components

TabList

Prop	Type	Default	Description
children	ReactNode	required	Tab components

Renders tabs in a horizontal row with a bottom border.

Tab

Prop	Type	Default	Description
value	string	required	Unique tab identifier
children	ReactNode	required	Tab label content

Active tab is bold with $primary color; inactive tabs use $muted.

TabPanel

Prop	Type	Default	Description
value	string	required	Tab value this panel corresponds to
children	ReactNode	required	Panel content

Only renders its children when the corresponding tab is active.

Keyboard Shortcuts

Key	Action
Right / l	Next tab (wraps around)
Left / h	Previous tab (wraps around)

Examples

Controlled Tabs

const [tab, setTab] = useState("files")

<Tabs value={tab} onChange={setTab}>
  <TabList>
    <Tab value="files">Files</Tab>
    <Tab value="search">Search</Tab>
  </TabList>
  <TabPanel value="files">
    <FileList />
  </TabPanel>
  <TabPanel value="search">
    <SearchPanel />
  </TabPanel>
</Tabs>

Settings Panel

<Tabs defaultValue="display">
  <TabList>
    <Tab value="display">Display</Tab>
    <Tab value="keys">Keybindings</Tab>
    <Tab value="theme">Theme</Tab>
  </TabList>
  <TabPanel value="display">
    <Text>Font size, line height, etc.</Text>
  </TabPanel>
  <TabPanel value="keys">
    <Text>Keyboard shortcut configuration</Text>
  </TabPanel>
  <TabPanel value="theme">
    <Text>Color scheme selection</Text>
  </TabPanel>
</Tabs>