Tabs

Underline tabs built on React Aria. The active tab paints a 2px blue underline over the baseline, and each tab optionally takes a leading icon and a trailing count badge, as in the example below.

Installation

You can add this tabs component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add tabs

Table of Contents

Tabs are built on React Aria for accessible, roving-tabindex keyboard navigation and automatic TabList / TabPanelassociation. We'll cover the following topics:

  • Basic tabs
  • Count badges & leading icons
  • Pill tabs
  • Keyboard navigation
  • Controlled selection

Pill tabs

PillTab is the fully-rounded sibling for switching local views rather than routed panels. It ships in two styles: blue(the default - the AI chat panel's Changes/Browser switcher) and the quieter gray, used for scope and filter rows like the settings Tools page. Both share the same idle and hover treatment; only the selected pill differs.

import { RiGlobalLine, RiInfinityLine } from "@remixicon/react";import { PillTab, PillTabList } from "@/components/base/tabs/pill-tab"; // Blue (default) - panel view switchers<PillTabList> <PillTab icon={RiInfinityLine} isSelected={view === "changes"} onSelect={() => setView("changes")}> Changes </PillTab> <PillTab icon={RiGlobalLine} isSelected={view === "browser"} onSelect={() => setView("browser")}> Browser </PillTab></PillTabList> // Gray - quieter scope / filter rows<PillTabList> <PillTab variant="gray" isSelected={scope === "Home"} onSelect={() => setScope("Home")}> Home </PillTab></PillTabList>