Tabs

A set of layered sections of content – known as tab panels – that are displayed one at a time.

Latest update (6 Jul 2026)

darkened inactive tab label for better contrast

Overview

View your key metrics and recent project activity. Track progress across all your active projects.

You have 12 active projects and 3 pending tasks.

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/tabs.json

Usage

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

<Tabs defaultValue="account" className="w-100">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>

Examples

Variants

Use the variant="line" prop on TabsList for a line style.

Orientation

Use orientation="vertical" for vertical tabs.

API reference

See the Radix Tabs documentation.