# React Accordion Component API

> Explore the API reference for the React Accordion component and discover how to effectively utilize its props for customization.

## CAccordion

```jsx
import { CAccordion } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `activeItemKey` | `string \| number \| undefined` | - | The active item key. |
| `alwaysOpen` | `boolean \| undefined` | `false` | Make accordion items stay open when another item is opened |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `flush` | `boolean \| undefined` | - | Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. |

## CAccordionBody

```jsx
import { CAccordionBody } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CAccordionHeader

```jsx
import { CAccordionHeader } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CAccordionItem

```jsx
import { CAccordionItem } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `id` | `string \| undefined` | - | The id global attribute defines an identifier (ID) that must be unique in the whole document. |
| `itemKey` | `string \| number \| undefined` | - | Item key. |