Components/Navigation/Tabs

Tabs

Navigation

Tabbed interface with keyboard navigation and ARIA roles.

Section switcher with a 2px Neo Green underline that follows the active tab. Supports horizontal (bottom underline) and vertical (right edge underline) orientations. Composed from TabsList, TabsTrigger, and TabsContent.

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "nosible-ux"

export default function Example() {
  return (
    <Tabs defaultValue="signals">
      <TabsList>
        <TabsTrigger value="signals">Signals</TabsTrigger>
        <TabsTrigger value="watchlist">Watchlist</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
      </TabsList>
      <TabsContent value="signals">Signal feed content</TabsContent>
      <TabsContent value="watchlist">Watchlist content</TabsContent>
      <TabsContent value="reports">Reports content</TabsContent>
    </Tabs>
  )
}

Examples

Horizontal (default)

Company overview panel

Vertical orientation

Account settings

Accessibility

Built on Radix Tabs: arrow key navigation, role="tablist", role="tab", role="tabpanel", and aria-selected are handled automatically.

Props

Name TypeDefaultDescription
activationMode
"manual" | "automatic" | undefinedautomaticWhether a tab is activated automatically or manually.
asChild
boolean | undefined
defaultValue
string | undefinedThe value of the tab to select by default, if uncontrolled
dir
Direction | undefinedThe direction of navigation between toolbar items.
onValueChange
((value: string) => void) | undefinedA function called when a new tab is selected
orientation
TabsOrientation | undefined"horizontal"Controls trigger layout and active indicator position.
size
TabsSize | undefined"md"Controls trigger height.
value
string | undefinedThe value for the selected tab, if controlled