A smooth animated tabs component with pill, underline, and segment layout transitions.
Installation
Usage
import { Tabs, TabsList, TabsTrigger, TabsContent } from "viora-ui";import { Tabs, TabsList, TabsTrigger, TabsContent } from "viora-ui";
export default function Demo() {
return (
<Tabs defaultValue="account" variant="pill">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="account">
<div>Account settings content</div>
</TabsContent>
<TabsContent value="password">
<div>Password settings content</div>
</TabsContent>
<TabsContent value="settings">
<div>General settings content</div>
</TabsContent>
</Tabs>
);
}API Reference
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | - | The value of the tab that should be active when initially rendered. |
| value | string | - | Controlled active tab value. |
| variant | "pill" | "underline" | "segment" | "pill" | Visual style and motion layout of active tab indicator. |
Built by Otis
Last updated: 9/13/2026