Tabs

Tabbed panels on Base UI Tabs primitive.

stable client:visible

Source: src/components/ui/tabs.tsx

Rendered example — light + dark

Light

Overview

A summary of your project status.

Everything looks good. No action required.

Dark

Overview

A summary of your project status.

Everything looks good. No action required.

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source for the full API.

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

export default function SettingsTabs() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account settings…</TabsContent>
      <TabsContent value="billing">Billing settings…</TabsContent>
    </Tabs>
  );
}