Tabs

Shows one panel of related content at a time.

Details

Activity

Studio North is due October 18.

tabs-basic-demo.tsx

"use client";import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/vip-ui/tabs";export function TabsBasicDemo() {  return (    <Tabs defaultValue="details" className="w-full max-w-sm">      <TabsList aria-label="Project">        <TabsTrigger value="details">Details</TabsTrigger>        <TabsTrigger value="activity">Activity</TabsTrigger>      </TabsList>      <TabsContent value="details">Studio North is due October 18.</TabsContent>      <TabsContent value="activity">        Recent changes and updates appear here.      </TabsContent>    </Tabs>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-tabs.json

Composition

Tabs
Owns the selected panel.
- TabsList
  Scrolls when the tabs do not fit.
  - TabsTriggerRepeats
- TabsContentRepeats

With icons

Overview

Activity

Team

Three of five tasks are complete.

tabs-demo.tsx

"use client";import { PulseIcon, StackIcon, UsersIcon } from "@phosphor-icons/react";import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/vip-ui/tabs";export function TabsDemo() {  return (    <Tabs defaultValue="overview" className="w-full max-w-lg">      <TabsList aria-label="Project workspace">        <TabsTrigger value="overview">          <StackIcon aria-hidden="true" />          Overview        </TabsTrigger>        <TabsTrigger value="activity">          <PulseIcon aria-hidden="true" />          Activity        </TabsTrigger>        <TabsTrigger value="team">          <UsersIcon aria-hidden="true" />          Team        </TabsTrigger>      </TabsList>      <TabsContent value="overview">        Three of five tasks are complete.      </TabsContent>      <TabsContent value="activity">        Maya Chen updated the homepage draft.      </TabsContent>      <TabsContent value="team">Four people can edit this project.</TabsContent>    </Tabs>  );}

Disabled tab

The arrow keys skip a disabled tab.

Plan

Invoices

Tax

You are on the Team plan.

tabs-disabled-demo.tsx

"use client";import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/vip-ui/tabs";export function TabsDisabledDemo() {  return (    <Tabs defaultValue="plan" className="w-full max-w-sm">      <TabsList aria-label="Billing">        <TabsTrigger value="plan">Plan</TabsTrigger>        <TabsTrigger value="invoices">Invoices</TabsTrigger>        <TabsTrigger value="tax" isDisabled>          Tax        </TabsTrigger>      </TabsList>      <TabsContent value="plan">You are on the Team plan.</TabsContent>      <TabsContent value="invoices">        Your last invoice was paid on October 1.      </TabsContent>      <TabsContent value="tax">Tax settings are not available yet.</TabsContent>    </Tabs>  );}

Vertical

In a narrow space, the panel moves below the tabs.

Profile

Notifications

Security

Your name and photo appear on shared projects.

tabs-vertical-demo.tsx

"use client";import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/vip-ui/tabs";export function TabsVerticalDemo() {  return (    <Tabs      defaultValue="profile"      orientation="vertical"      className="w-full max-w-lg"    >      <TabsList aria-label="Settings">        <TabsTrigger value="profile">Profile</TabsTrigger>        <TabsTrigger value="notifications">Notifications</TabsTrigger>        <TabsTrigger value="security">Security</TabsTrigger>      </TabsList>      <TabsContent value="profile">        Your name and photo appear on shared projects.      </TabsContent>      <TabsContent value="notifications">        Choose which updates reach your inbox.      </TabsContent>      <TabsContent value="security">        Review your password and active sessions.      </TabsContent>    </Tabs>  );}

Many tabs

The list scrolls and keeps the focused tab in view.

Overview

Issues

Deployments

Analytics

Members

Settings

Studio North has 12 open tasks.

tabs-overflow-demo.tsx

"use client";import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/vip-ui/tabs";const sections = [  {    value: "overview",    label: "Overview",    text: "Studio North has 12 open tasks.",  },  { value: "issues", label: "Issues", text: "Four issues need a review." },  {    value: "deployments",    label: "Deployments",    text: "The last deploy was 2 hours ago.",  },  {    value: "analytics",    label: "Analytics",    text: "Visits went up 8% this week.",  },  {    value: "members",    label: "Members",    text: "Six people can edit this project.",  },  {    value: "settings",    label: "Settings",    text: "Only owners can change settings.",  },];export function TabsOverflowDemo() {  return (    <Tabs defaultValue="overview" className="w-full max-w-sm">      <TabsList aria-label="Project">        {sections.map((section) => (          <TabsTrigger key={section.value} value={section.value}>            {section.label}          </TabsTrigger>        ))}      </TabsList>      {sections.map((section) => (        <TabsContent key={section.value} value={section.value}>          {section.text}        </TabsContent>      ))}    </Tabs>  );}

Sizes

Overview

Usage

Billing

Overview

Usage

Billing

Overview

Usage

Billing

tabs-sizes-demo.tsx

"use client";import { Tabs, TabsList, TabsTrigger } from "@/components/vip-ui/tabs";export function TabsSizesDemo() {  return (    <div className="flex flex-col items-start gap-4">      <Tabs defaultValue="overview">        <TabsList size="xs" aria-label="Report">          <TabsTrigger value="overview">Overview</TabsTrigger>          <TabsTrigger value="usage">Usage</TabsTrigger>          <TabsTrigger value="billing">Billing</TabsTrigger>        </TabsList>      </Tabs>      <Tabs defaultValue="overview">        <TabsList size="sm" aria-label="Report">          <TabsTrigger value="overview">Overview</TabsTrigger>          <TabsTrigger value="usage">Usage</TabsTrigger>          <TabsTrigger value="billing">Billing</TabsTrigger>        </TabsList>      </Tabs>      <Tabs defaultValue="overview">        <TabsList size="md" aria-label="Report">          <TabsTrigger value="overview">Overview</TabsTrigger>          <TabsTrigger value="usage">Usage</TabsTrigger>          <TabsTrigger value="billing">Billing</TabsTrigger>        </TabsList>      </Tabs>    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Tabs (opens in a new tab).

TabsList

size: "xs" | "sm" | "md" | "lg" | "xl": Uses the Button heights for each tab. Without a size, tabs are 44 pixels high on small screens and 36 pixels from 640 pixels.

Tabs

value: string: The value of the selected tab, controlled. Same as selectedKey.
defaultValue: string: The value of the tab that is selected at first, uncontrolled. Same as defaultSelectedKey.
onValueChange: (value: string) => void: Gets the value of the selected tab as a string. onSelectionChange also works.

TabsTrigger

value: string: Connects the tab to the TabsContent with the same value.
size: "xs" | "sm" | "md" | "lg" | "xl": Sets the size of this tab. It overrides the size of the TabsList.

TabsContent

value: string: Connects the panel to the TabsTrigger with the same value.