Sections

Utilities

Forms

Hooks

useIsMobileNew

Tabs

A tabs for navigating between content.

Docs API

Profile

Manage your profile information

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

Installation


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.

Manage your profile information and preferences.

Variant

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

States

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.

Table

Textarea