Tabs

The Tabs component provides you with tab navigation and sections.

Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@nostromo/ui-core'
// or
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@nostromo/ui-core/tabs'

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@nostromo/ui-core'
 
export default function Example() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <p>Account settings</p>
      </TabsContent>
      <TabsContent value="password">
        <p>Password settings</p>
      </TabsContent>
    </Tabs>
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@nostromo/ui-core' export default function TabsExample() { return ( <Tabs defaultValue="account" className="w-[400px]"> <TabsList> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger> </TabsList> <TabsContent value="account">...

Accessibility

Keyboard Navigation

Arrow Keys: Navigate between tabs
Tab: Moves focus to tab content
Enter/Space: Activates the focused tab
Home/End: Moves to first/last tab

ARIA Attributes

role="tablist": Identifies the tab container
role="tab": Identifies individual tabs
role="tabpanel": Identifies tab content
aria-selected: Indicates the active tab
aria-controls: Links tabs to their content panels

Focus Management

Roving tabindex: Only one tab is focusable at a time
Focus indicators: Clear visual focus states
Focus restoration: Maintains focus when switching tabs

Screen Reader Support

Tab announcements: Active tab is announced
Content changes: Tab content changes are announced
Navigation hints: Keyboard navigation is described

Examples

// Accessible tabs with proper labeling
<Tabs defaultValue="account" className="w-[400px]">
  <TabsList aria-label="Account settings">
    <TabsTrigger value="account" aria-controls="account-panel">
      Account
    </TabsTrigger>
    <TabsTrigger value="password" aria-controls="password-panel">
      Password
    </TabsTrigger>
  </TabsList>
  <TabsContent value="account" id="account-panel" role="tabpanel">
    <p>Account content here.</p>
  </TabsContent>
  <TabsContent value="password" id="password-panel" role="tabpanel">
    <p>Password content here.</p>
  </TabsContent>
</Tabs>

Props

Tabs

Prop	Type	Default	Required	Description
`defaultValue`	`string`	`undefined`	No	Default active tab value (uncontrolled)
`value`	`string`	`undefined`	No	Active tab value (controlled)
`onValueChange`	`(value: string) => void`	`undefined`	No	Callback when active tab changes
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	No	Tab orientation
`dir`	`"ltr" \| "rtl"`	`"ltr"`	No	Text direction
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Tab content (TabsList, TabsContent)

TabsList

Prop	Type	Default	Required	Description
`variant`	`"default" \| "pills" \| "underline"`	`"default"`	No	Visual variant
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of tabs
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Tab triggers

TabsTrigger

Prop	Type	Default	Required	Description
`value`	`string`	-	Yes	Unique value for this tab
`disabled`	`boolean`	`false`	No	Whether the tab is disabled
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Tab label content
`asChild`	`boolean`	`false`	No	Render as child element

TabsContent

Prop	Type	Default	Required	Description
`value`	`string`	-	Yes	Value matching the corresponding TabsTrigger
`forceMount`	`boolean`	`false`	No	Force mount content even when inactive
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Tab panel content

ErrorMessage Breadcrumb