Tabs
ExperimentalSwitch between related content panels in the same context.
Example
Manage account preferences.
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Tabs, TabsList, TabsTrigger, TabsContent } from 'panel-ui-kit/tabs'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Tabs defaultValue="account"> <TabsList aria-label="Preferences"> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="updates">Updates</TabsTrigger> </TabsList> <TabsContent value="account">Manage account preferences.</TabsContent> <TabsContent value="updates">Manage update preferences.</TabsContent> </Tabs> </PanelUiTheme> );}When to use
Name the tab list. Use links for routes. Manual activation is available for expensive content.
Keyboard
Arrow keys move focus. Automatic mode activates on focus; manual mode uses Space or Enter. Home/End reach the edges.
Properties
| Property | Values | Default |
|---|---|---|
value / defaultValue | string | Caller owned |
activationMode | automatic · manual | automatic |
orientation | horizontal · vertical | horizontal |
motion | full · reduced · off · object | Inherited |