Tabs

Shows one of several panels in the same place. Use it where content is switched between rather than laid out side by side.

import { Tab, TabPanel, Tabs } from 'neba';

<Tabs defaultValue="overview">
  <Tab value="overview">Overview</Tab>
  <Tab value="usage">Usage</Tab>

  <TabPanel value="overview">Three deploys today, all green.</TabPanel>
  <TabPanel value="usage">1,284 build minutes used.</TabPanel>
</Tabs>;

There is no <TabList> wrapper. Write Tabs and TabPanels side by side and the component sorts them into the bar and the panel area.

Props

Tabs

Prop	Type	Default	Description
variantshared	'solid' | 'outline' | 'text'	'outline'	Weight of the tab **bar**, not of the panels. solid is a segmented control, outline is a rule along the bar, text is the same without it
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The tabs' height and type scale, on Button's own ladder, so a tab bar keeps its baseline in a toolbar
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. Arbitrary colour values are not accepted
densityshared	'default' | 'compact'	'default'	Padding only: never the height, never the type scale
value	string | number | null	—	The chosen tab, for a controlled set
defaultValue	string | number | null	—	Which starts chosen
onValueChange	(value: string | number | null) => void	—	Called when the chosen tab changes
orientationshared	'horizontal' | 'vertical'	'horizontal'	Which way the bar runs. vertical stands the tabs down the side and moves the arrow keys onto the other axis
activateOnFocus	boolean	false	Whether the arrow keys also choose. Off by default: the moment one panel fetches, walking past four tabs fires four requests
loopFocus	boolean	true	Whether the arrow keys wrap from the last tab back to the first
overflow	'scroll' | 'wrap'	'scroll'	What a bar with more tabs than room does. scroll stays one line and fades the end that has more past it; wrap takes as many lines as it needs
lines	number	—	The most tab-rows the bar may be tall; past it the bar scrolls. Only read when overflow is wrap
wheel	boolean	true	Turns a wheel rolled over the bar into travel along it, and holds it at the ends too. A bar that fits takes nothing; the pointer leaving the bar is what gives the page its wheel back
fullWidth	boolean	false	The tabs share the full width of the bar, each taking an equal part
children	ReactNode	—	The Tabs and the TabPanels. They are sorted into their two boxes for you, so there is no list wrapper to remember

Tab

Prop	Type	Default	Description
value *	string | number	—	Identifies the tab, and picks out the panel with the same value
startIcon	ReactNode	—	Content before the label
endIcon	ReactNode	—	Content after the label: a count, a Badge, a status dot
disabled	boolean	false	Unavailable, but still listed
children	ReactNode	—	The tab's label

TabPanel

Prop	Type	Default	Description
value *	string | number	—	Which tab shows this panel
keepMounted	boolean	false	Keeps the panel in the DOM while hidden. For content that is expensive to build, or form state that should survive
children	ReactNode	—	The content

Examples

variant

variant is the weight of the tab bar, not of the panels under it.

• solid: a filled tile moves between the tabs inside a trough.
• outline: the indicator rides on a rule along the edge of the bar.
• text: the indicator with no rule, for tabs inside a Card that already has an edge.

import { Tab, TabPanel, Tabs } from 'neba';

/**
 * `variant` here is the weight of the *bar*, not of the panels under it:
 * `solid` is a segmented control with a tile that slides between the tabs,
 * `outline` is the classic rule with the indicator riding on it, and `text` is
 * the same bar with the rule taken away — for tabs inside a Card that already
 * has an edge of its own.
 */
export default function TabsVariants() {
  return (
    <div className="flex w-full flex-col gap-6">
      {(['solid', 'outline', 'text'] as const).map((variant) => (
        <Tabs key={variant} variant={variant} defaultValue="a" size="sm">
          <Tab value="a">Overview</Tab>
          <Tab value="b">Usage</Tab>
          <Tab value="c">Billing</Tab>
          <TabPanel value="a">variant="{variant}"</TabPanel>
          <TabPanel value="b">
            The indicator moves by animating its box, never by transforming it.
          </TabPanel>
          <TabPanel value="c">Nothing with text in it moves.</TabPanel>
        </Tabs>
      ))}
    </div>
  );
}

orientation

vertical puts the bar down the left side. The arrow keys move onto the vertical axis with it.

import { Card, Tab, TabPanel, Tabs } from 'neba';

/**
 * A vertical bar is not just a rotated horizontal one: Base UI moves the arrow
 * keys onto the other axis with it, which is what makes it reachable at all.
 */
export default function TabsOrientation() {
  return (
    <div className="grid w-full grid-cols-1 gap-5 lg:grid-cols-2">
      <Tabs orientation="vertical" defaultValue="general" size="sm">
        <Tab value="general">General</Tab>
        <Tab value="members">Members</Tab>
        <Tab value="tokens">Tokens</Tab>
        <Tab value="webhooks">Webhooks</Tab>

        <TabPanel value="general">The project name, its slug and its default branch.</TabPanel>
        <TabPanel value="members">Nine people, three of them admins.</TabPanel>
        <TabPanel value="tokens">Two tokens, one expiring in eleven days.</TabPanel>
        <TabPanel value="webhooks">No webhooks yet.</TabPanel>
      </Tabs>

      <Card size="sm" title="Inside a card" subtitle="variant='text' and fullWidth">
        <Tabs variant="text" fullWidth defaultValue="a" size="sm">
          <Tab value="a">Daily</Tab>
          <Tab value="b">Weekly</Tab>
          <Tab value="c">Monthly</Tab>
          <TabPanel value="a">A card already has an edge, so the bar gives up its own.</TabPanel>
          <TabPanel value="b">The tabs share the width equally.</TabPanel>
          <TabPanel value="c">Nothing here draws a second rectangle.</TabPanel>
        </Tabs>
      </Card>
    </div>
  );
}

overflow and lines

overflow says what a bar with more tabs than room does about it. scroll (the default) keeps the bar on one line and scrolls along it; the ends fade while there is more bar in that direction, and the scrollbar itself is hidden. wrap takes as many lines as the tabs need, and the rule under the chosen tab moves onto the line that tab is on.

lines caps a wrapping bar at that many tab-rows and scrolls past the cap. It is read only when overflow is wrap.

import { Tab, TabPanel, Tabs, Typography } from 'neba';

const SECTIONS = [
  'Overview',
  'Activity',
  'Members',
  'Settings',
  'Billing',
  'Integrations',
  'Audit log',
  'Webhooks',
  'API keys'
];

function Bar(props: { overflow?: 'scroll' | 'wrap'; lines?: number }) {
  return (
    <Tabs defaultValue="Overview" {...props}>
      {SECTIONS.map((section) => (
        <Tab key={section} value={section}>
          {section}
        </Tab>
      ))}
      <TabPanel value="Overview">Nine sections in a box too narrow for them.</TabPanel>
    </Tabs>
  );
}

export default function TabsOverflow() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <div>
        <Typography level="caption" color="secondary">
          overflow=&quot;scroll&quot; — the default
        </Typography>
        <Bar />
      </div>

      <div>
        <Typography level="caption" color="secondary">
          overflow=&quot;wrap&quot;
        </Typography>
        <Bar overflow="wrap" />
      </div>

      <div>
        <Typography level="caption" color="secondary">
          overflow=&quot;wrap&quot; · lines=2
        </Typography>
        <Bar overflow="wrap" lines={2} />
      </div>
    </div>
  );
}

wheel

A mouse has one wheel and it points down the page, which is the one axis a scrolling tab bar does not run along. wheel turns a wheel rolled over the bar into travel along it. It is on by default: the bar has no scroll buttons and its scrollbar is hidden, so a wheel the page answers instead leaves the tabs past the edge reachable only by keyboard.

What it takes it keeps, at the ends as well, so a flick that runs out of bar does not turn into a jump down the article. Moving the pointer off the bar is what gives the page its wheel back. A bar that fits takes nothing, so a page with three tabs on it is unaffected. A trackpad swiping sideways is left to the browser, which scrolls it better.

Pass wheel={false} to turn it off.

import { Tab, TabPanel, Tabs, Typography } from 'neba';

const SECTIONS = [
  'Overview',
  'Activity',
  'Members',
  'Settings',
  'Billing',
  'Integrations',
  'Audit log',
  'Webhooks',
  'API keys',
  'Domains'
];

function Bar(props: { wheel?: boolean }) {
  return (
    <Tabs defaultValue="Overview" {...props}>
      {SECTIONS.map((section) => (
        <Tab key={section} value={section}>
          {section}
        </Tab>
      ))}
      <TabPanel value="Overview">Ten sections in a box too narrow for them.</TabPanel>
    </Tabs>
  );
}

export default function TabsWheel() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <div>
        <Typography level="caption" color="secondary">
          Roll over the bar; the page waits until the pointer leaves
        </Typography>
        <Bar />
      </div>

      <div>
        <Typography level="caption" color="secondary">
          wheel={'{false}'} — the wheel is the page&apos;s
        </Typography>
        <Bar wheel={false} />
      </div>
    </div>
  );
}

startIcon and endIcon

Put an icon or a count before or after the label.

import { Badge, Tab, TabPanel, Tabs } from 'neba';

function InboxIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M2 9.5h3l1 2h4l1-2h3M2.5 9.5 4 3.5h8l1.5 6v2a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 2.5 11.5v-2Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function StarIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="m8 2.5 1.7 3.5 3.8.5-2.8 2.7.7 3.8L8 11.2 4.6 13l.7-3.8L2.5 6.5l3.8-.5L8 2.5Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export default function TabsIcons() {
  return (
    <Tabs variant="solid" defaultValue="inbox" className="w-full max-w-lg">
      <Tab value="inbox" startIcon={<InboxIcon />} endIcon={<Badge content={12} size="xs" />}>
        Inbox
      </Tab>
      <Tab value="starred" startIcon={<StarIcon />}>
        Starred
      </Tab>
      <Tab value="sent">Sent</Tab>

      <TabPanel value="inbox">Twelve unread, four of them from this morning.</TabPanel>
      <TabPanel value="starred">Nothing starred yet.</TabPanel>
      <TabPanel value="sent">Eight sent this week.</TabPanel>
    </Tabs>
  );
}

size

The same control heights as Button: a md tab and a md button are both 32px, so a tab bar can sit in a toolbar beside one.

activateOnFocus

Off by default: walking the arrow keys along the bar does not change the panel, and Enter or Space activates. That keeps a panel that fetches from firing a request per tab passed.

keepMounted

Set on a TabPanel, it keeps an unselected panel's React tree alive.

Accessibility

• The whole bar is one tab stop, with the arrow keys and Home/End moving within it (a roving tab index).
• The tab / tabpanel roles and the aria-controls between them are wired up.
• A panel with nothing focusable inside it takes focus itself, so the content stays reachable by keyboard.
• The indicator moves via left / top and width / height, so no label is resampled.