Tabs

Layered content sections with tab-based navigation. Built on Radix UI Tabs — handles roving focus, keyboard navigation, and ARIA tabpanel semantics automatically.

Built on Radix UI.

✓Arrow key navigation between tabs
✓Active tab shows bg-background with a subtle shadow
✓Controlled and uncontrolled usage
✓Content panels are hidden (not removed) when inactive
✓Full keyboard accessibility

Manage your account settings.

import { Tabs }from "@aetherstack/ui"

tabs.tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

export function TabsDemo() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Account settings content.
      </TabsContent>
      <TabsContent value="password">
        Password settings content.
      </TabsContent>
    </Tabs>
  )
}

Usage

Default

Manage your account settings.

Full width tabs

Make the TabsList and triggers fill the full container width.

Manage your account settings.

Controlled

Manage your account settings.

With disabled tab

Manage your account settings.

Props

Prop	Type	Default	Description

Tabs (Root)

Prop	Type	Default	Description
defaultValue	string	—	Uncontrolled active tab value.
value	string	—	Controlled active tab value.
onValueChange	(value: string) => void	—	Callback when active tab changes.
orientation	"horizontal" \| "vertical"	"horizontal"	Layout direction — affects arrow key behavior.
activationMode	"automatic" \| "manual"	"automatic"	Whether tabs activate on focus (automatic) or require Enter/Space (manual).

TabsTrigger

Prop	Type	Default	Description
value*	string	—	Matches a TabsContent value.
disabled	boolean	false	Disables this tab.

TabsContent

Prop	Type	Default	Description
value*	string	—	Matches a TabsTrigger value.
forceMount	boolean	—	Keep the content in the DOM even when inactive (useful for forms that should not lose state).

* Required props

Accessibility

→Uses the tablist/tab/tabpanel ARIA pattern.
→Arrow keys navigate between tabs. Home goes to first, End to last.
→Tab key moves focus between the tab list and the active tab panel.
→Inactive panels are hidden with aria-hidden='true' but remain in the DOM.
→Use forceMount on TabsContent to keep form state alive across tab switches.