# Tabs: Vertical

> `orientation="vertical"` stacks the tabs; the underline moves to the side.

Example: https://hextaui.com/docs/tabs/examples/vertical
Component docs: https://hextaui.com/docs/tabs.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/tabs-vertical.json
```

This adds `components/examples/tabs/vertical.tsx` with the Tabs component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/tabs/vertical.tsx"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const sections = [
  { value: "general", label: "General", text: "Name, avatar and language." },
  { value: "security", label: "Security", text: "Password and two-factor." },
  { value: "billing", label: "Billing", text: "Plan, invoices and payment." },
]

export function TabsVertical() {
  return (
    <Tabs
      defaultValue="general"
      orientation="vertical"
      className="w-full max-w-md"
    >
      <TabsList variant="line">
        {sections.map((section) => (
          <TabsTrigger key={section.value} value={section.value}>
            {section.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {sections.map((section) => (
        <TabsContent key={section.value} value={section.value}>
          <div className="flex flex-col gap-1 py-2 text-sm">
            <p className="font-medium">{section.label}</p>
            <p className="text-muted-foreground">{section.text}</p>
          </div>
        </TabsContent>
      ))}
    </Tabs>
  )
}
```

## Props in this example

### Tabs

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `any` | `0` |  |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |

### TabsList

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "line"` | `"default"` |  |

### TabsTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `any` | – |  |

### TabsContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `any` | – |  |

## More Tabs examples

- [Underline](https://hextaui.com/docs/tabs/examples/line.md)
- [Many tabs](https://hextaui.com/docs/tabs/examples/overflow.md)
- [Many tabs, segmented](https://hextaui.com/docs/tabs/examples/overflow-segmented.md)
- [Icons and counts](https://hextaui.com/docs/tabs/examples/icons.md)
- [Disabled](https://hextaui.com/docs/tabs/examples/disabled.md)
- [Controlled](https://hextaui.com/docs/tabs/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/tabs/examples/rtl.md)