Components
Tabs
A segmented navigation pattern for switching related content in place without leaving the current screen.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add tabs to your project.
watermelon add tabs2
Import the component
Import Tabs from your local UI registry output.
Import
import { Tabs } from "@/components/ui/tabs";Import
Import
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";Usage
Tab content swaps in place without leaving the screen.
Loading...
API Reference
| prop | type | default | description |
|---|---|---|---|
| value / defaultValue | string | - | Controls which tab is currently active. |
| onValueChange | (value: string) => void | - | Called when the active tab changes. |
| value | string | - | Links each trigger and content panel to the same tab id. |