Tabs

Stable

Tab-based navigation and content switching primitive.

Installation

npm install @xaui/native

Import

import { Tabs, Tab } from '@xaui/native/tabs'

Basic Usage

Minimal example showing the component with its default configuration.

import { Tabs } from '@xaui/native/tabs'

export function Example() {
  return (
    <Tabs>
      {/* children */}
    </Tabs>
  )
}

Basic Tabs

Tabs with inline content per panel.

import { Tabs, Tab } from '@xaui/native/tabs'
import { Typography } from '@xaui/native/typography'

export function BasicExample() {
  return (
    <Tabs>
      <Tab tabKey="home" title="Home">
        <Typography>Home content</Typography>
      </Tab>
      <Tab tabKey="profile" title="Profile">
        <Typography>Profile content</Typography>
      </Tab>
      <Tab tabKey="settings" title="Settings">
        <Typography>Settings content</Typography>
      </Tab>
    </Tabs>
  )
}

Variants

Switch between tab bar visual styles.

import { Tabs, Tab } from '@xaui/native/tabs'
import { Column } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function VariantsExample() {
  return (
    <Column gap={24}>
      <Tabs variant="solid">
        <Tab tabKey="one" title="One"><Typography>One</Typography></Tab>
        <Tab tabKey="two" title="Two"><Typography>Two</Typography></Tab>
      </Tabs>
      <Tabs variant="bordered">
        <Tab tabKey="one" title="One"><Typography>One</Typography></Tab>
        <Tab tabKey="two" title="Two"><Typography>Two</Typography></Tab>
      </Tabs>
      <Tabs variant="light">
        <Tab tabKey="one" title="One"><Typography>One</Typography></Tab>
        <Tab tabKey="two" title="Two"><Typography>Two</Typography></Tab>
      </Tabs>
      <Tabs variant="underlined">
        <Tab tabKey="one" title="One"><Typography>One</Typography></Tab>
        <Tab tabKey="two" title="Two"><Typography>Two</Typography></Tab>
      </Tabs>
    </Column>
  )
}

Controlled Selection

Drive the active tab from external state.

import { useState } from 'react'
import { Tabs, Tab } from '@xaui/native/tabs'
import { Typography } from '@xaui/native/typography'

export function ControlledExample() {
  const [selected, setSelected] = useState('inbox')

  return (
    <Tabs selectedKey={selected} onSelectionChange={setSelected}>
      <Tab tabKey="inbox" title="Inbox">
        <Typography>Inbox items</Typography>
      </Tab>
      <Tab tabKey="sent" title="Sent">
        <Typography>Sent items</Typography>
      </Tab>
      <Tab tabKey="drafts" title="Drafts">
        <Typography>Draft items</Typography>
      </Tab>
    </Tabs>
  )
}

Disabled Tabs

Disable specific tabs by passing their keys.

import { Tabs, Tab } from '@xaui/native/tabs'
import { Typography } from '@xaui/native/typography'

export function DisabledTabsExample() {
  return (
    <Tabs disabledKeys={['premium']}>
      <Tab tabKey="free" title="Free">
        <Typography>Free content</Typography>
      </Tab>
      <Tab tabKey="premium" title="Premium">
        <Typography>Premium content</Typography>
      </Tab>
    </Tabs>
  )
}

Full Width

Stretch tabs to fill the available width.

import { Tabs, Tab } from '@xaui/native/tabs'
import { Typography } from '@xaui/native/typography'

export function FullWidthExample() {
  return (
    <Tabs fullWidth>
      <Tab tabKey="overview" title="Overview"><Typography>Overview</Typography></Tab>
      <Tab tabKey="details" title="Details"><Typography>Details</Typography></Tab>
      <Tab tabKey="reviews" title="Reviews"><Typography>Reviews</Typography></Tab>
    </Tabs>
  )
}