Tabs

Switches between panels in one place. A segmented control in Konoha and Kiri, an underlined bar in Iwa.

Installation

npx rasengan-ui add tabs

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/tabs.json

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
export function Settings() {
  return (
    <Tabs defaultValue="account">
      <TabsList aria-label="Settings">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">…</TabsContent>
      <TabsContent value="password">…</TabsContent>
    </Tabs>
  );
}

Vertical

orientation="vertical" on the Tabs puts the list beside the panels; the arrow keys become up and down.

Variants and sizes

variant and size go on Tabs, and its list and tabs follow. default is segmented: the active tab raised on the list's well (in Iwa, an ink fill over an underlined bar). underline marks the active tab with a primary line on a bottom border, for a page's sections. pills drops the well and fills the active tab with the primary. sm, default and lg follow the village's control heights.

<Tabs variant="underline" size="sm" defaultValue="overview">…</Tabs>

Villages

Its look is five tokens (--tabs-list, --tabs-list-padding, --tab-active, --tab-active-foreground, --tab-active-shadow): a raised segment in Konoha and Kiri, an inverted tab over a rule in Iwa.

Accessibility

• A tablist of tabs, each linked to its tabpanel; name the list with aria-label.
• Tab reaches the selected tab; arrow keys move between tabs, Enter or Space selects (or pass activateOnFocus to the list).

API reference

The parts of Base UI's Tabs, styled:

tabsListVariants({ variant }) and tabsTriggerVariants({ variant, size }) return the classes.