Tabs

Tab navigation for switching between content panels, in underline and pill variants, built on Radix UI.

Account settings

Installation

npx asteria-ui add tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

<Tabs defaultValue="account">
  <TabsList aria-label="Settings">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="billing">Billing</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings</TabsContent>
  <TabsContent value="billing">Billing settings</TabsContent>
</Tabs>

The underline variant renders a 2px bottom border on every trigger (transparent when inactive, border-brand when active) rather than only on the selected one — that keeps the tab bar's height constant when selection changes, instead of jumping by 2px the way a literal reading of the static mockup would.

Examples

Pill variant

API reference

Tabs and TabsContent are direct re-exports of Radix's Root/Content.

TabsList

Prop	Type	Default	Description
variant	"underline" \| "pill"	"underline"	Shared with child TabsTrigger elements via context.

Accessibility

Roles. role="tablist", each tab role="tab", each panel role="tabpanel".
Keyboard. Arrow keys navigate between tabs — and, in this Radix version, auto-select the newly-focused tab (verified directly; this is genuinely different from Radio Group's arrow-key behavior in the same install, which only moves focus without selecting).
ARIA. aria-selected on the active tab, aria-controls linking each tab to its panel.