Tabs

Preview

AccountPassword

Make changes to your account here. Click save when you're done.

Installation

npx skeci-ui add tabs

Usage

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

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account content here.</TabsContent>
  <TabsContent value="password">Password content here.</TabsContent>
</Tabs>

Variants

Outline Variant

Tab 1Tab 2

Content for Tab 1

Filled Variant

Tab 1Tab 2

Content for Tab 1

Props

Tabs

Prop	Type	Default	Description
defaultValue	string	—	The value of the tab that should be active by default.
value	string	—	The controlled value of the active tab.
onValueChange	(value: string) => void	—	Event handler for when the active tab changes.
variant	'default' | 'outline' | 'filled'	'default'	The visual style of the tabs.

TabsTrigger

Prop	Type	Default	Description
value	string	(required)	A unique value for the tab.
disabled	boolean	false	Whether the tab is disabled.