Tabs

A set of layered sections of content, displayed one at a time.

Default

A segmented track. The active tab is a white pill with a thin shadow that slides between tabs.

Numbers you rent from Smallest, billed monthly.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@smallest-inc/ui";

export default function TabsDefault() {
  return (
    <Tabs defaultValue="rented" className="gap-4">
      <TabsList>
        <TabsTrigger value="rented">Rented numbers</TabsTrigger>
        <TabsTrigger value="imported">Imported numbers</TabsTrigger>
      </TabsList>
      <TabsContent value="rented" className="text-fg-secondary">
        Numbers you rent from Smallest, billed monthly.
      </TabsContent>
      <TabsContent value="imported" className="text-fg-secondary">
        Numbers you brought in from your own carrier over SIP.
      </TabsContent>
    </Tabs>
  );
}

Line

Pass variant="line" to TabsList for text tabs on a hairline, marked by a 2px foreground bar. Use it for page-level sections.

Owner, admin, member and guest. Built-in roles cannot be edited.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@smallest-inc/ui";

export default function TabsLine() {
  return (
    <Tabs defaultValue="default" className="gap-4">
      <TabsList variant="line">
        <TabsTrigger value="all">All roles</TabsTrigger>
        <TabsTrigger value="default">Default roles</TabsTrigger>
        <TabsTrigger value="custom">Custom roles</TabsTrigger>
      </TabsList>
      <TabsContent value="all" className="text-fg-secondary">
        Every role in the workspace.
      </TabsContent>
      <TabsContent value="default" className="text-fg-secondary">
        Owner, admin, member and guest. Built-in roles cannot be edited.
      </TabsContent>
      <TabsContent value="custom" className="text-fg-secondary">
        Roles your admins created for this workspace.
      </TabsContent>
    </Tabs>
  );
}

Icons

Place a Central Icon before the label. Triggers size it to 16px in both variants.

import {
  AgentsIcon,
  HistoryIcon,
  SettingsIcon,
  Tabs,
  TabsList,
  TabsTrigger,
} from "@smallest-inc/ui";

export default function TabsIcons() {
  return (
    <div className="flex flex-col items-start gap-6">
      <Tabs defaultValue="agents" className="gap-4">
        <TabsList>
          <TabsTrigger value="agents">
            <AgentsIcon />
            Agents
          </TabsTrigger>
          <TabsTrigger value="history">
            <HistoryIcon />
            Call history
          </TabsTrigger>
          <TabsTrigger value="settings">
            <SettingsIcon />
            Settings
          </TabsTrigger>
        </TabsList>
      </Tabs>
      <Tabs defaultValue="agents" className="gap-4">
        <TabsList variant="line">
          <TabsTrigger value="agents">
            <AgentsIcon />
            Agents
          </TabsTrigger>
          <TabsTrigger value="history">
            <HistoryIcon />
            Call history
          </TabsTrigger>
          <TabsTrigger value="settings">
            <SettingsIcon />
            Settings
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  );
}

Disabled

Pass disabled to a TabsTrigger. It dims to 50% and cannot be selected.

import { Tabs, TabsList, TabsTrigger } from "@smallest-inc/ui";

export default function TabsDisabled() {
  return (
    <div className="flex flex-col items-start gap-6">
      <Tabs defaultValue="inbound" className="gap-4">
        <TabsList>
          <TabsTrigger value="inbound">Inbound</TabsTrigger>
          <TabsTrigger value="outbound">Outbound</TabsTrigger>
          <TabsTrigger value="campaigns" disabled>
            Campaigns
          </TabsTrigger>
        </TabsList>
      </Tabs>
      <Tabs defaultValue="inbound" className="gap-4">
        <TabsList variant="line">
          <TabsTrigger value="inbound">Inbound</TabsTrigger>
          <TabsTrigger value="outbound">Outbound</TabsTrigger>
          <TabsTrigger value="campaigns" disabled>
            Campaigns
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  );
}

Controlled

Pass value and onValueChange to drive the selected tab from state, for example to keep it in the URL.

2,860 calls in the last 7 days.

import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@smallest-inc/ui";

const RANGES = {
  day: "412 calls in the last 24 hours.",
  week: "2,860 calls in the last 7 days.",
  month: "11,940 calls in the last 30 days.",
} as const;

type Range = keyof typeof RANGES;

export default function TabsControlled() {
  const [range, setRange] = useState<Range>("week");

  return (
    <Tabs value={range} onValueChange={(next) => setRange(next as Range)} className="gap-4">
      <TabsList>
        <TabsTrigger value="day">24 hours</TabsTrigger>
        <TabsTrigger value="week">7 days</TabsTrigger>
        <TabsTrigger value="month">30 days</TabsTrigger>
      </TabsList>
      {Object.entries(RANGES).map(([value, summary]) => (
        <TabsContent key={value} value={value} className="text-fg-secondary">
          {summary}
        </TabsContent>
      ))}
    </Tabs>
  );
}

Best practices

When to use

Use for a small number (two to five) of peer views that share one page-level context, such as Rented and Imported numbers.
Use Stepper for an ordered flow, Breadcrumb for hierarchy, and a Dropdown or Select when there are more options than fit on one line.

Behavior

The default segmented variant is for switching views inside a card or toolbar; use variant="line" for page-level sections.
Use one variant per surface and do not nest Tabs.
Control value and onValueChange when the selection should persist in the URL or survive navigation.
Disable a trigger only when the view exists but is unavailable; hide it if it never applies.

Content

Labels are one or two sentence-case words; icons are optional and must be used on every tab or none.

Accessibility

Every TabsTrigger needs a matching TabsContent value so the tab controls a labelled panel.

PreviousTable NextTextarea