Tabs
A set of layered sections of content that display one panel at a time.
Account
Make changes to your account here. Click save when you are done.
Installation
npx shadcn@latest add @uqudo/tabsUsage
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/uqudo/ui/tabs"<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">Make changes to your account here.</TabsContent>
<TabsContent value="password">Change your password here.</TabsContent>
</Tabs>Use defaultValue for an uncontrolled tab set, or value + onValueChange to
control it yourself. Every trigger and content panel is matched by its value.
Examples
Line
The line variant drops the filled background and underlines the active
trigger instead.
A summary of your workspace.
Vertical
Set orientation="vertical" on Tabs to stack the list beside the content.
The list and triggers adapt automatically through data-orientation.
<Tabs defaultValue="general" orientation="vertical">
<TabsList>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="billing">Billing</TabsTrigger>
</TabsList>
<TabsContent value="general">General settings.</TabsContent>
<TabsContent value="billing">Billing settings.</TabsContent>
</Tabs>API Reference
Tabs
Prop
Type
TabsList
Prop
Type
TabsTrigger
Prop
Type
TabsContent
Prop
Type
tabsListVariants
The class-variance-authority recipe behind TabsList. Use it to style a custom
list element the same way.
import { tabsListVariants } from "@/components/uqudo/ui/tabs"
<div className={tabsListVariants({ variant: "line" })}>...</div>Prop
Type
Data attributes
| Attribute | Element | Value |
|---|---|---|
data-slot | all | tabs, tabs-list, tabs-trigger or tabs-content. |
data-orientation | Tabs | The resolved orientation. |
data-variant | TabsList | The resolved variant. |
data-state | TabsTrigger | active or inactive. |