Tabs
A set of layered sections of content displayed one at a time.
Make changes to your account.
'use client';
import {
Tabs,
TabsList,
TabsPanel,
TabsTrigger,
} from '@/components/ui/tabs';
export function TabsDefault() {
return (
<Tabs defaultValue='account'>
<TabsList>
<TabsTrigger value='account'>Account</TabsTrigger>
<TabsTrigger value='password'>Password</TabsTrigger>
<TabsTrigger value='settings'>Settings</TabsTrigger>
</TabsList>
<TabsPanel value='account' className='p-4'>
<p className='text-sm text-muted-foreground'>
Make changes to your account.
</p>
</TabsPanel>
<TabsPanel value='password' className='p-4'>
<p className='text-sm text-muted-foreground'>
Change your password here.
</p>
</TabsPanel>
<TabsPanel value='settings' className='p-4'>
<p className='text-sm text-muted-foreground'>
Adjust your settings here.
</p>
</TabsPanel>
</Tabs>
);
}
Installation
Usage
import { Tabs, TabsList, TabsTrigger, TabsPanel } from "@/components/ui/tabs"<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsPanel value="account">Account content</TabsPanel>
<TabsPanel value="password">Password content</TabsPanel>
</Tabs>Examples
Underline
Use variant="underline" on the TabsList for an underline style indicator.
View your dashboard overview.
'use client';
import {
Tabs,
TabsList,
TabsPanel,
TabsTrigger,
} from '@/components/ui/tabs';
export function TabsUnderline() {
return (
<Tabs defaultValue='overview'>
<TabsList variant='underline'>
<TabsTrigger value='overview'>Overview</TabsTrigger>
<TabsTrigger value='analytics'>Analytics</TabsTrigger>
<TabsTrigger value='reports'>Reports</TabsTrigger>
</TabsList>
<TabsPanel value='overview' className='p-4'>
<p className='text-sm text-muted-foreground'>
View your dashboard overview.
</p>
</TabsPanel>
<TabsPanel value='analytics' className='p-4'>
<p className='text-sm text-muted-foreground'>
Analyze your data and metrics.
</p>
</TabsPanel>
<TabsPanel value='reports' className='p-4'>
<p className='text-sm text-muted-foreground'>
Generate and view reports.
</p>
</TabsPanel>
</Tabs>
);
}