Tabs
NavigationA tabbed interface for organizing content into separate views. Use tabs to switch between different sections of related content without navigating to a new page.
Import
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";Usage
Basic Tabs
Standard tabbed interface
Overview content goes here. This tab displays general information about the product.
Product Details
Real-world example with product information
- Invisible mounting system
- Wide dispersion technology
- Weather-resistant construction
- Paintable grilles
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | The value of the tab to show by default |
value | string | — | Controlled active tab value |
onValueChange | (value: string) => void | — | Handler called when active tab changes |