Sections

Utilities

Tabs

A tabs for navigating between content.

Profile

Manage your profile information

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

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/tabs.json

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.

Manage your profile information and preferences.

Variant

Use the variant prop on <TabsList /> to change the selection indicator style.

Default

Content 1

Underline

Content 1

Orientation

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

Horizontal

Content 1

Vertical

Content 1

State

Disabled

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

Profile content

Examples

Vertical with underline

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

Content 1

With icons

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"`	`"horizontal"`
`className`	`string`	`-`

TabsList

Container for tab triggers and the selection indicator.

Prop	Type	Default
`variant`	`"default"` \| `"underline"`	`"default"`
`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.

On This Page

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