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
Interactive Tabs
A responsive tabbed interface. On mobile, tabs become scrollable horizontally to fit smaller screens.
- Invisible mounting system
- Wide dispersion technology
- Weather-resistant construction
- Paintable grilles
API Reference
defaultValue—stringThe value of the tab to show by default
value—stringControlled active tab value
onValueChange—(value: string) => voidHandler called when active tab changes
| 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 |