Tabs
navigationA set of layered sections of content—known as tab panels—that are displayed one at a time.
Preview
Account settings content here.
Installation
npm install @launchapp/design-systemImport
import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "@launchapp/design-system";Examples
Basic Tabs
<TabsRoot defaultValue="account" className="w-[400px]"> <TabsList> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger> </TabsList> <TabsContent value="account"> <p className="text-sm text-muted-foreground">Account settings here.</p> </TabsContent> <TabsContent value="password"> <p className="text-sm text-muted-foreground">Password settings here.</p> </TabsContent></TabsRoot>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled active tab value. |
defaultValue | string | — | Initial active tab when uncontrolled. |
onValueChange | (value: string) => void | — | Callback when active tab changes. |
orientation | "horizontal" | "vertical" | "horizontal" | Orientation of the tab list. |