---
description: 'Accordion component.'
labels: ['mui', 'react', 'accordion']
---

import Grid from '@mui/material/Grid'
import Accordion from './Accordion'

## Basic Accordion component

Basic example that renders an accordion

### Component usage

```js
<Accordion
  title={'Basic Accordion Item'}
  content={'Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat.Aliquam eget maximus est, id dignissim quam'}
/>
```

### Use this live example to interact with Accordion component

Live example:

```js live
<Grid container rowSpacing={4} columnSpacing={2}>
  <Grid item xs={6}>
    <Accordion
      title={'Basic Accordion Item'}
      content={'Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat.Aliquam eget maximus est, id dignissim quam'}
    />
  </Grid>
  <Grid item xs={6}>
    <Accordion
      variant='filled'
      square={true}
      title={'Square and filled Accordion Item'}
      content={'Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat.Aliquam eget maximus est, id dignissim quam'}
    />
  </Grid>
</Grid>
```
