Sections

Components

Utilities

Forms

Hooks

useIsMobile

Tabs

Copy Markdown

A tabs for navigating between content.

Docs API

PreviewCode

ProfileSettingsSecurity

Profile

Manage your profile information

View you shared information here, update you profile name, picture and email.

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/tabs

Anatomy#

Tabs
├── TabsList
│ └── TabsTrigger
└── TabsContent

Usage#

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

<Tabs>
  <TabsList>
    <TabsTrigger value="1">Tab 1</TabsTrigger>
    <TabsTrigger value="2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="1">Tab 1 content</TabsContent>
  <TabsContent value="2">Tab 2 content</TabsContent>
</Tabs>

Controlled#

Use value and onValueChange to control the active tab programmatically.

PreviewCode

ProfileSettingsSecurity

Manage your profile information and preferences.

Go to ProfileGo to SettingsGo to Security

Variant#

Default#

PreviewCode

ProfileSettingsSecurity

Content 1

Underline#

PreviewCode

ProfileSettingsSecurity

Content 1

Orientation#

Use the orientation prop on Tabs to lay out tabs horizontally or vertically.

Horizontal#

PreviewCode

Tab 1Tab 2Tab 3

Content 1

Vertical#

PreviewCode

Tab 1Tab 2Tab 3

Content 1

States#

Disabled#

Disable individual tabs with the disabled prop on TabsTrigger. Disabled tabs are not focusable or selectable.

PreviewCode

ProfileSettings

Profile content

Examples#

Vertical with underline#

Combine orientation="vertical" on Tabs with variant="underline" on TabsList.

PreviewCode

Tab 1Tab 2Tab 3

Content 1

With icons#

PreviewCode

ProfileSettingsSecurity

Profile content

API Reference#

Tabs#

Root element. Manages tab state and layout.

Prop	Type	Default
`value`	`string`	`-`
`defaultValue`	`string`	`-`
`onValueChange`	`(details: ValueChangeDetails) => void`	`-`
`orientation`	`"horizontal"	"vertical"`
`className`	`string`	`-`

TabsList#

Container for tab triggers and the selection indicator.

Prop	Type	Default
`variant`	`"default"	"underline"`
`className`	`string`	`-`

TabsTrigger#

Button that selects a tab. Must have a value matching a TabsContent panel.

Prop	Type	Default
`value`	`string`	required
`disabled`	`boolean`	`false`
`className`	`string`	`-`

TabsContent#

Panel shown when its tab is selected. Must have a value matching a TabsTrigger.

Prop	Type	Default
`value`	`string`	required
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.

[

Table ](/docs/components/table)[

Tags Input ](/docs/components/tags-input)

On This Page

Installation Anatomy Usage Controlled Variant Default Underline Orientation Horizontal Vertical States Disabled Examples Vertical with underline With icons API Reference Tabs TabsList TabsTrigger TabsContent