Tabs
Tabs organize content into panels shown one at a time, with a row of triggers to switch between them.
Make changes to your account here.
Installation
pnpm add @viliha/vui-uiThen import from @viliha/vui-ui/tabs.
Usage
tabs-demo.tsx
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@viliha/vui-ui/tabs";
export function Example() {
return (
<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">Make changes to your account.</TabsContent>
<TabsContent value="password">Change your password here.</TabsContent>
</Tabs>
);
}API Reference
Built on the Radix Tabs primitive. TabsList also takes a variant of "default" or "line".
| Prop | Type | Default |
|---|---|---|
| defaultValue | string | — |
| value | string | — |
| onValueChange | (value: string) => void | — |
| orientation | "horizontal" | "vertical" | "horizontal" |
| TabsList variant | "default" | "line" | "default" |