Tabs

Tabs on Base UI with a raised thumb or a line underline that springs to the active tab, optional count badges, vertical orientation and roving keyboard focus.

src/registry/ui/tabs.tsx/r/tabs.json

Northwind Labs

billing@northwind.io · Customer since March 2024

INV-2041Sep 24$12,400Paid

INV-2033Sep 2$3,890Pending

INV-2019Aug 24$12,400Paid

INV-2004Jul 30$890Overdue

Revenue

$48,210

+12.4% vs previous period

Click or arrow between tabs

Default with a badge, line

Installation#

bash

npx shadcn@latest add @minidev/tabs

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/tabs.json

Usage#

tsx

import { Tabs } from "@/components/ui/tabs"

export function Example() {
  return (
    <Tabs defaultValue="overview" className="w-full">
      <div className={scroll}>
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="invoices" badge={12}>Invoices</TabsTrigger>
          <TabsTrigger value="activity">Activity</TabsTrigger>
          <TabsTrigger value="settings" disabled>Settings</TabsTrigger>
        </TabsList>
      </div>
      <TabsContent value="overview" className={panel}>Overview for the Lumen workspace.</TabsContent>
      <TabsContent value="invoices" className={panel}>12 invoices issued this month.</TabsContent>
      <TabsContent value="activity" className={panel}>Recent activity.</TabsContent>
    </Tabs>
  )
}