ComponentsNavigation & disclosure

Tabs

Shared primitive

Switch related views in the same context.

@/components/ui/tabs

Composition preview

Try Tabs alongside its related navigation & disclosure components. These examples keep all actions local.

Your draft preview appears here.

Usage

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

<>
<Tabs defaultValue="preview">
  <TabsList><TabsTrigger value="preview">Preview</TabsTrigger><TabsTrigger value="details">Details</TabsTrigger></TabsList>
  <TabsContent value="preview">Preview content</TabsContent>
  <TabsContent value="details">Details content</TabsContent>
</Tabs>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

value/defaultValue, onValueChange, activationMode, orientation; TabsList, TabsTrigger, TabsContent

Usage & accessibility

Keep trigger values and panel IDs linked. Existing hosts retain their selection and keyboard handlers through asChild composition.

Implementation contract

src/components/ui/tabs.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.