Nexus DSdocs

Tabs

Update your name and email address.

Installation

npm install @radix-ui/react-tabs@^1.1.13 class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0
lib/utils.ts
components/tabs/index.ts
components/tabs/tabs.tsx

Code

'use client';

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

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="nx:w-full nx:max-w-sm">
      <TabsList aria-label="Account settings">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <p className="nx:typography-body-default nx:text-muted-foreground">
          Update your name and email address.
        </p>
      </TabsContent>
      <TabsContent value="password">
        <p className="nx:typography-body-default nx:text-muted-foreground">
          Change the password you sign in with.
        </p>
      </TabsContent>
    </Tabs>
  );
}

Props

Tabs

Tabs adds no props of its own; it accepts the props of the element or primitive it wraps.

TabsContent

TabsContent adds no props of its own; it accepts the props of the element or primitive it wraps.

TabsList

TabsList props
PropTypeDefaultDescription
size"default" | "sm" | "lg""default"

Size of every trigger in the list

variant"default" | "underline""default"

Visual style variant of every trigger in the list

TabsTrigger

TabsTrigger adds no props of its own; it accepts the props of the element or primitive it wraps.

Examples

Variants

Goals, owners and deadlines.

Every message in your inbox.

'use client';

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

export default function TabsVariants() {
  return (
    <div className="nx:flex nx:w-full nx:max-w-sm nx:flex-col nx:gap-6">
      <Tabs defaultValue="overview">
        <TabsList aria-label="Project sections">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="activity">Activity</TabsTrigger>
        </TabsList>
        <TabsContent value="overview">
          <p className="nx:typography-body-default nx:text-muted-foreground">
            Goals, owners and deadlines.
          </p>
        </TabsContent>
        <TabsContent value="activity">
          <p className="nx:typography-body-default nx:text-muted-foreground">
            Recent changes by the team.
          </p>
        </TabsContent>
      </Tabs>
      <Tabs defaultValue="all">
        <TabsList variant="underline" aria-label="Inbox filter">
          <TabsTrigger value="all">All</TabsTrigger>
          <TabsTrigger value="unread">Unread</TabsTrigger>
        </TabsList>
        <TabsContent value="all">
          <p className="nx:typography-body-default nx:text-muted-foreground">
            Every message in your inbox.
          </p>
        </TabsContent>
        <TabsContent value="unread">
          <p className="nx:typography-body-default nx:text-muted-foreground">
            Messages you have not opened.
          </p>
        </TabsContent>
      </Tabs>
    </div>
  );
}

Sizes

Visits over the last seven days.

Invoices settled this quarter.

Files shown as thumbnails.

'use client';

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

export default function TabsSizes() {
  return (
    <div className="nx:flex nx:w-full nx:max-w-sm nx:flex-col nx:gap-6">
      <Tabs defaultValue="week">
        <TabsList size="sm" aria-label="Chart range">
          <TabsTrigger value="week">Week</TabsTrigger>
          <TabsTrigger value="month">Month</TabsTrigger>
        </TabsList>
        <TabsContent value="week">
          <p className="nx:typography-body-default nx:text-muted-foreground">
            Visits over the last seven days.
          </p>
        </TabsContent>
        <TabsContent value="month">
          <p className="nx:typography-body-default nx:text-muted-foreground">
            Visits over the last thirty days.
          </p>
        </TabsContent>
      </Tabs>
      <Tabs defaultValue="paid">
        <TabsList aria-label="Invoice status">
          <TabsTrigger value="paid">Paid</TabsTrigger>
          <TabsTrigger value="pending">Pending</TabsTrigger>
        </TabsList>
        <TabsContent value="paid">
          <p className="nx:typography-body-default nx:text-muted-foreground">
            Invoices settled this quarter.
          </p>
        </TabsContent>
        <TabsContent value="pending">
          <p className="nx:typography-body-default nx:text-muted-foreground">
            Invoices awaiting payment.
          </p>
        </TabsContent>
      </Tabs>
      <Tabs defaultValue="grid">
        <TabsList size="lg" aria-label="Library layout">
          <TabsTrigger value="grid">Grid</TabsTrigger>
          <TabsTrigger value="list">List</TabsTrigger>
        </TabsList>
        <TabsContent value="grid">
          <p className="nx:typography-body-default nx:text-muted-foreground">
            Files shown as thumbnails.
          </p>
        </TabsContent>
        <TabsContent value="list">
          <p className="nx:typography-body-default nx:text-muted-foreground">
            Files shown as rows.
          </p>
        </TabsContent>
      </Tabs>
    </div>
  );
}

Disabled

Billing is locked on the free plan.

'use client';

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

export default function TabsDisabled() {
  return (
    <Tabs defaultValue="account" className="nx:w-full nx:max-w-sm">
      <TabsList aria-label="Workspace settings">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="billing" disabled>
          Billing
        </TabsTrigger>
        <TabsTrigger value="team">Team</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <p className="nx:typography-body-default nx:text-muted-foreground">
          Billing is locked on the free plan.
        </p>
      </TabsContent>
      <TabsContent value="billing">
        <p className="nx:typography-body-default nx:text-muted-foreground">
          Manage invoices and payment methods.
        </p>
      </TabsContent>
      <TabsContent value="team">
        <p className="nx:typography-body-default nx:text-muted-foreground">
          Invite people to your workspace.
        </p>
      </TabsContent>
    </Tabs>
  );
}