# Tabs **Category**: react **URL**: https://www.heroui.com/docs/react/migration/tabs **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/tabs.mdx > Migration guide for Tabs from HeroUI v2 to v3 *** Refer to the [v3 Tabs documentation](/docs/react/components/tabs) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2. ## Structure Changes In v2, Tabs used `Tab` component with `title` prop and children as panel content: ```tsx import { Tabs, Tab } from "@heroui/react"; export default function App() { return ( Content here ); } ``` In v3, Tabs requires compound components with separate tab and panel: ```tsx import { Tabs } from "@heroui/react"; export default function App() { return ( Photos Content here ); } ``` ## Key Changes ### 1. Component Structure **v2:** `Tabs` with `Tab` children (title prop + children as panel) **v3:** Compound components (`Tabs.ListContainer`, `Tabs.List`, `Tabs.Tab`, `Tabs.Indicator`, `Tabs.Separator`, `Tabs.Panel`) ### 2. Prop Changes | v2 Prop | v3 Location | Notes | |---------|-------------|-------| | `key` (on Tab) | `id` (on Tab and Panel) | Changed prop name | | `title` (on Tab) | — | Content goes directly in `Tabs.Tab` | | `isVertical` | `orientation` | Changed to `"horizontal"` \| `"vertical"` | | `placement` | — | Use `orientation` and layout | | `variant` | `variant` | Simplified to `primary` \| `secondary` only | | `color` | — | Removed (use Tailwind CSS) | | `size` | — | Removed (use Tailwind CSS) | | `radius` | — | Removed (use Tailwind CSS) | | `classNames` | — | Use `className` props on individual components | | `disableCursorAnimation` | — | Use `Tabs.Indicator` component | | `disableAnimation` | — | Removed (animations handled differently) | | `fullWidth` | — | Removed (use Tailwind CSS) | ### 3. Component Changes - **Tab identification**: `key` → `id` (must match between `Tabs.Tab` and `Tabs.Panel`) - **Tab content**: `title` prop → direct children in `Tabs.Tab` - **Panel content**: Tab children → separate `Tabs.Panel` component - **Indicator**: Automatic cursor → explicit `Tabs.Indicator` component - **Separator**: New `Tabs.Separator` component to display separator lines between tabs ## Migration Examples ### Controlled Tabs ```tsx import { useState } from "react"; const [selected, setSelected] = useState("photos"); Content Content ``` ```tsx import { useState } from "react"; const [selected, setSelected] = useState("photos"); Photos Music Content Content ``` ### With Icons ```tsx Photos}> Content ``` ```tsx Photos Content ``` ### With Separator In v3, you can add `Tabs.Separator` inside each `Tabs.Tab` (except the first) to display separator lines between tabs. This is a new feature with no v2 equivalent. ```tsx Photos Music Videos Photos content Music content Videos content ``` ## Component Anatomy The v3 Tabs follows this structure: ``` Tabs (Root) ├── Tabs.ListContainer │ └── Tabs.List │ └── Tabs.Tab │ ├── Tabs.Separator (optional, omit on first tab) │ └── Tabs.Indicator (optional) └── Tabs.Panel (one per tab, matching id) ``` ## Summary 1. **Component Structure**: Must use compound components (`Tabs.ListContainer`, `Tabs.List`, `Tabs.Tab`, `Tabs.Indicator`, `Tabs.Separator`, `Tabs.Panel`) 2. **Tab Identification**: `key` → `id` (must match between tab and panel) 3. **Tab Content**: `title` prop removed - content goes directly in `Tabs.Tab` 4. **Panel Separation**: Panel content moved to separate `Tabs.Panel` component 5. **Indicator**: Must explicitly include `Tabs.Indicator` in each tab 6. **Orientation**: `isVertical` → `orientation` prop 7. **Styling**: `variant` simplified to `primary` \| `secondary`; `color`, `size`, `radius`, `placement` removed - use Tailwind for more 8. **ClassNames Removed**: Use `className` props on individual components 9. **Separator (New)**: Use `Tabs.Separator` inside `Tabs.Tab` to display separator lines between tabs (no v2 equivalent)