# Accordion **Category**: react **URL**: https://www.heroui.com/docs/react/migration/accordion **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/accordion.mdx > Migration guide for Accordion from HeroUI v2 to v3 *** Refer to the [v3 Accordion documentation](/docs/react/components/accordion) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2. ## Structure Changes In v2, `AccordionItem` was a self-contained component that accepted props for title, subtitle, content, and other elements: ```tsx import { Accordion, AccordionItem } from "@heroui/react"; export default function App() { return ( Content here Content here ); } ``` In v3, Accordion uses a compound component pattern with explicit subcomponents: ```tsx import { Accordion } from "@heroui/react"; export default function App() { return ( Accordion 1 Content here Accordion 2 Content here ); } ``` ## Key Changes ### 1. Component Structure **v2:** Single `AccordionItem` component with props **v3:** Compound components: `Accordion.Item`, `Accordion.Heading`, `Accordion.Trigger`, `Accordion.Panel`, `Accordion.Body`, `Accordion.Indicator` ### 2. Prop Changes | v2 Prop | v3 Location | Notes | |---------|-------------|-------| | `selectedKeys` | `Accordion` | Renamed to `expandedKeys`; type `Iterable` | | `defaultSelectedKeys` | `Accordion` | Renamed to `defaultExpandedKeys` | | `onSelectionChange` | `Accordion` | Renamed to `onExpandedChange`; `(keys: Set) => void` | | `selectionMode="multiple"` | `Accordion` | Use `allowsMultipleExpanded` (boolean) | | `isCompact` | - | Removed (use Tailwind CSS e.g. `text-sm`, `py-2`) | | `hideIndicator` | - | Omit `` to hide | | `disableAnimation`, `disableIndicatorAnimation`, `motionProps` | - | Removed (animations not supported / use CSS) | | `showDivider`, `dividerProps` | - | Removed (add dividers manually or use `Divider`) | | `keepContentMounted` | - | Removed (content always mounted in v3) | | `selectionBehavior`, `disallowEmptySelection` | - | Removed (not applicable) | | `itemClasses` | - | Use `className` on items | | `startContent` | - | Place content in `` | | `title`, `subtitle` | - | Place content in `` | ### 3. Variants **v2 Variants:** `light`, `shadow`, `bordered`, `splitted` **v3 Variants:** `default`, `surface` The v3 variants are simplified. To achieve similar effects to v2 variants: - **v2 `light`** → v3 `default` - **v2 `shadow`** → v3 `surface` - **v2 `bordered`** → v3 `default` + add border classes - **v2 `splitted`** → v3 `default` + add background color and spacing/margin between items ### 4. Item Identification **v2:** React's `key` was used for both list reconciliation and expanded state. **v3:** Use `id` on `Accordion.Item` for expanded state; keep React's `key` on items in lists. ## Migration Examples ### Controlled State ```tsx import { useState } from "react"; import { Accordion, AccordionItem } from "@heroui/react"; const [selectedKeys, setSelectedKeys] = useState(new Set(["1"])); Content 1 Content 2 ``` ```tsx import { useState } from "react"; import { Accordion } from "@heroui/react"; import type { Key } from "@heroui/react"; const [expandedKeys, setExpandedKeys] = useState>(new Set(["1"])); Item 1 Content 1 Item 2 Content 2 ``` ### With Subtitle and Start Content ```tsx import { Icon } from "@iconify/react"; } > Content here ``` ```tsx import { Icon } from "@iconify/react";

Accordion 1 Press to expand

Content here ``` ### Custom Indicator ```tsx import { Icon } from "@iconify/react"; ( props.isOpen ? : )} > Content ``` ```tsx import { Icon } from "@iconify/react"; import { useState } from "react"; import { Accordion } from "@heroui/react"; import type { Key } from "@heroui/react"; const [expandedKeys, setExpandedKeys] = useState>(new Set()); Item 1 {expandedKeys.has("1") ? ( ) : ( )} Content ``` ### Disabled Items and Default Expanded Keys ```tsx Content 1 Content 2 ``` ```tsx Item 1 Content 1 Item 2 Content 2 ``` ## Styling Changes ### v2: `classNames` Prop ```tsx ``` ### v3: Direct `className` Props ```tsx Title Content ``` ## Component Anatomy The v3 Accordion follows this structure: ``` Accordion (Root) └── Accordion.Item ├── Accordion.Heading │ └── Accordion.Trigger │ ├── [Your content: title, subtitle, icons, etc.] │ └── Accordion.Indicator (optional) └── Accordion.Panel └── Accordion.Body └── [Your content] ``` ## Summary 1. **Component Structure**: Must use compound components instead of props 2. **State Props**: `selectedKeys` → `expandedKeys`, `onSelectionChange` → `onExpandedChange` 3. **Multiple Selection**: `selectionMode="multiple"` → `allowsMultipleExpanded={true}` 4. **Item identity**: Use `id` for expanded state; keep React's `key` for list reconciliation 5. **Variants**: Reduced from 4 to 2 variants 6. **Removed Props**: Many convenience props removed; use Tailwind CSS classes instead 7. **Content Structure**: Title, subtitle, and start content must be manually placed in `Trigger` 8. **Indicator**: Must be explicitly rendered; no automatic indicator