Tabs

A set of layered sections of content, known as tab panels, that are displayed one at a time.

Preview & Interactive Laboratory

Standard Variant

General dashboard performance metrics.

Premium Hub Variant

User Profile Detail

Usage & Implementation

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

<Tabs defaultValue="account" variant="premium">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account details...</TabsContent>
</Tabs>

React / Tailwind

Granular Customization

Tabs List

The container for tab triggers.

className={`variant='glass' | 'premium'`}

Tabs Trigger

The individual tab buttons.

className={`className`}

Active State

The styles applied when a tab is selected.

className={`data-active:...`}

API Reference (Props)

Prop	Type	Default	Description
variant	'default' \| 'line' \| 'glass' \| 'premium'	'default'	The visual style of the tabs list.
defaultValue	string	-	The tab that should be open by default.
orientation	'horizontal' \| 'vertical'	'horizontal'	The layout direction of the tabs.