Skip to content

Tabs

Switch between views of the same thing. On a narrow screen the row scrolls inside itself.

Sourcecomponents/tabs.tsx

Underline

Checkout redesign

12 screens, 3 waiting for review. Due Friday.

Segmented

Team plan

$12 per seat, per month.

Five tabs (the row scrolls on a phone)

General

Workspace name, URL and default language.

Vertical (side by side from md)

Profile

Name, photo and email address.

Usage

Tabs usage
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/tabs";
export function TabsUsage() {  return (    <Tabs defaultValue="overview">      <TabsList aria-label="Project">        <TabsTab value="overview">Overview</TabsTab>        <TabsTab value="briefs">Briefs</TabsTab>        <TabsTab value="activity">Activity</TabsTab>      </TabsList>      <TabsPanel value="overview">The project at a glance.</TabsPanel>      <TabsPanel value="briefs">Every brief in the project.</TabsPanel>      <TabsPanel value="activity">Who changed what, and when.</TabsPanel>    </Tabs>  );}

When to use

Use when

Switching between views of the same thing. segmented for two to four short options

Don’t use when

Changing a setting (use Toggle Group or Radio Group); moving between pages (use links)