Tabs

A set of layered content sections that are displayed one at a time.

NameAlex Morgan
Emailalex@example.com
RoleAdmin
export default function TabsHero() {
  return (
    <div className="w-72">
      <Tabs defaultValue="account">
        <TabsList>
          <TabsTab value="account">Account</TabsTab>
          <TabsTab value="security">Security</TabsTab>
          <TabsTab value="billing">Billing</TabsTab>
        </TabsList>
        <TabsPanel value="account">
          <div className="mt-4 space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-secondary">Name</span>
              <span>Alex Morgan</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-secondary">Email</span>
              <span>alex@example.com</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-secondary">Role</span>
              <span>Admin</span>
            </div>
          </div>
        </TabsPanel>
        <TabsPanel value="security">
          <div className="mt-4 space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-secondary">Password</span>
              <span>Updated 3 months ago</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-secondary">Two-factor auth</span>
              <span>Enabled</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-secondary">Active sessions</span>
              <span>2</span>
            </div>
          </div>
        </TabsPanel>
        <TabsPanel value="billing">
          <div className="mt-4 space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-secondary">Plan</span>
              <span>Pro</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-secondary">Next billing</span>
              <span>Jun 1, 2026</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-secondary">Amount</span>
              <span>$29/mo</span>
            </div>
          </div>
        </TabsPanel>
      </Tabs>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/tabs.json"

Usage

import { Tabs, TabsSurface, TabsList, TabsTab, TabsPanel } from '@/registry/ui/tabs';

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="analytics">Analytics</TabsTab>
    <TabsTab value="reports">Reports</TabsTab>
  </TabsList>
  <TabsPanel value="overview">Overview content</TabsPanel>
  <TabsPanel value="analytics">Analytics content</TabsPanel>
  <TabsPanel value="reports">Reports content</TabsPanel>
</Tabs>;

Examples

Variants

The variant prop on TabsList controls the active indicator style.

Overview content

export function TabsSoft() {
  return (
    <Tabs defaultValue="overview">
      <TabsList variant="soft">
        <TabsTab value="overview">Overview</TabsTab>
        <TabsTab value="analytics">Analytics</TabsTab>
        <TabsTab value="reports">Reports</TabsTab>
      </TabsList>
      <TabsPanel value="overview">
        <p className="mt-4 text-sm text-secondary">Overview content</p>
      </TabsPanel>
      <TabsPanel value="analytics">
        <p className="mt-4 text-sm text-secondary">Analytics content</p>
      </TabsPanel>
      <TabsPanel value="reports">
        <p className="mt-4 text-sm text-secondary">Reports content</p>
      </TabsPanel>
    </Tabs>
  );
}

Orientation

Set orientation="vertical" on Tabs to stack tabs alongside their panels.

Overview content

export default function TabsOrientation() {
  return (
    <Tabs defaultValue="overview" orientation="vertical">
      <TabsList>
        <TabsTab value="overview">Overview</TabsTab>
        <TabsTab value="analytics">Analytics</TabsTab>
        <TabsTab value="reports">Reports</TabsTab>
      </TabsList>
      <TabsPanel value="overview">
        <p className="text-sm text-secondary">Overview content</p>
      </TabsPanel>
      <TabsPanel value="analytics">
        <p className="text-sm text-secondary">Analytics content</p>
      </TabsPanel>
      <TabsPanel value="reports">
        <p className="text-sm text-secondary">Reports content</p>
      </TabsPanel>
    </Tabs>
  );
}

With surface

Wrap TabsList in TabsSurface to add a background container around the tab list.

Overview content

export default function TabsWithSurface() {
  return (
    <Tabs defaultValue="overview">
      <TabsSurface>
        <TabsList>
          <TabsTab value="overview">Overview</TabsTab>
          <TabsTab value="analytics">Analytics</TabsTab>
          <TabsTab value="reports">Reports</TabsTab>
        </TabsList>
      </TabsSurface>
      <TabsPanel value="overview">
        <p className="mt-4 text-sm text-secondary">Overview content</p>
      </TabsPanel>
      <TabsPanel value="analytics">
        <p className="mt-4 text-sm text-secondary">Analytics content</p>
      </TabsPanel>
      <TabsPanel value="reports">
        <p className="mt-4 text-sm text-secondary">Reports content</p>
      </TabsPanel>
    </Tabs>
  );
}

Transition

Set transition on TabsList to smoothly animate the indicator when switching tabs.

Overview content

export default function TabsTransition() {
  return (
    <Tabs defaultValue="overview">
      <TabsList transition>
        <TabsTab value="overview">Overview</TabsTab>
        <TabsTab value="analytics">Analytics</TabsTab>
        <TabsTab value="reports">Reports</TabsTab>
      </TabsList>
      <TabsPanel value="overview">
        <p className="mt-4 text-sm text-secondary">Overview content</p>
      </TabsPanel>
      <TabsPanel value="analytics">
        <p className="mt-4 text-sm text-secondary">Analytics content</p>
      </TabsPanel>
      <TabsPanel value="reports">
        <p className="mt-4 text-sm text-secondary">Reports content</p>
      </TabsPanel>
    </Tabs>
  );
}

API Reference

TabsList

PropTypeDefault
variant"soft" | "solid""soft"
trackbooleantrue
transitionbooleanfalse

For the remaining sub-components (Tabs, TabsTab, TabsPanel), all props are forwarded to the corresponding Base UI primitives. See the Base UI Tabs API Reference.