Home

Tabs

A row of tabs that switches between panels of one page, drawn as pills with a sliding white thumb or as an underline.

ui.tabscomponents/ui/tabs.tsx

Use case

For the AI

Use it to split one record or page into sections a person moves between without leaving it: a client's Invoices, Contracts and Files; an order's Details, Items and History. The pill list suits a short switch inside a card; `variant="underline"` heads a page's sections. Each `TabsTab` has a `TabsPanel` with the same `value`; a choice that only changes a value or a view, with no panels, is the segmented control.

Use it when

  • One record has several sections of content
  • Two to six sections, each with a short name
  • The sections belong to the page, not to separate places in the tool

Use something else when

  • Choosing a value or a view (Day, Week, Month) with no panels of its own: Segmented control
  • Moving between the tool's main sections: Sidebar
  • Several sections a person may open at once on one scrolling page: Accordion
  • Turning several options on and off: Toggle group

Examples

Pills: the white thumb glides
Three invoices, one overdue.
Underline, for a page's sections

Code

Import

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"

Usage

<Tabs defaultValue="invoices" className="w-full">
  <TabsList variant="underline" className="w-full justify-start">
    <TabsTab value="invoices" className="grow-0">Invoices</TabsTab>
    <TabsTab value="contracts" className="grow-0">Contracts</TabsTab>
    <TabsTab value="files" className="grow-0">Files</TabsTab>
  </TabsList>
  <TabsPanel value="invoices" className="pt-4">Three invoices, one overdue.</TabsPanel>
  <TabsPanel value="contracts" className="pt-4">One signed contract.</TabsPanel>
  <TabsPanel value="files" className="pt-4">Twelve files.</TabsPanel>
</Tabs>

Rules

  • Tab names are short and in Title Case (Overview, Activity, Settings).
  • Every `TabsTab` has a `TabsPanel` with the same `value`; `Tabs` takes `defaultValue`, or `value` with `onValueChange`.
  • Underline tabs heading a page take `grow-0` on each tab and `w-full justify-start` on the list, so they sit at the left on one rule.
  • The thumb or the underline is drawn by `TabsList` and slides on its own; never colour the active tab yourself.
  • The pill slides to the picked tab on the glide in --dur-slide; content below that changes size goes in a box with useGlide.