---
title: React Accordion Component
name: Accordion
description: Build vertically collapsing accordions in combination with our React Accordion component.
route: /components/accordion/
other_frameworks: accordion
---

## How to use React Accordion component.

Click the accordions below to expand/collapse the accordion content.

<ExampleSnippet component="AccordionExample" componentName="React Accordion" />

### Flush

Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

<ExampleSnippet component="AccordionFlushExample" componentName="React Accordion" />

### Always open

Add `alwaysOpen` property to make react accordion items stay open when another item is opened.

<ExampleSnippet component="AccordionAlwaysOpenExample" componentName="React Accordion" />

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CAccordion /&gt;](./api/#caccordion)
- [&lt;CAccordionBody /&gt;](./api/#caccordionbody)
- [&lt;CAccordionHeader /&gt;](./api/#caccordionheader)
- [&lt;CAccordionItem /&gt;](./api/#caccordionitem)

