---
title: Accordion
description: A set of collapsible panels with headings.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="base-accordion-demo" />

## Installation

<ComponentInstallation name="base-accordion" />

## Usage

```tsx
<Accordion>
  <AccordionItem>
    <AccordionTrigger>Accordion Item 1</AccordionTrigger>
    <AccordionPanel>Accordion Panel 1</AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Accordion Item 2</AccordionTrigger>
    <AccordionPanel>Accordion Panel 2</AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Accordion Item 3</AccordionTrigger>
    <AccordionPanel>Accordion Panel 3</AccordionPanel>
  </AccordionItem>
</Accordion>
```

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink
    href="https://base-ui.com/react/components/accordion"
    text="Docs"
  />
  <ExternalLink
    href="https://base-ui.com/react/components/accordion#api-reference"
    text="API Reference"
  />
</div>

### Animate UI Props

#### AccordionTrigger

<TypeTable
  type={{
    transition: {
      description: 'The transition of the accordion chevron',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 150, damping: 17 }",
    },
    chevron: {
      description: 'Whether to show the accordion chevron',
      type: 'boolean',
      required: false,
      default: 'true',
    },
  }}
/>

#### AccordionPanel

<TypeTable
  type={{
    transition: {
      description: 'The transition of the accordion panel',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 150, damping: 22 }",
    },
  }}
/>

## Credits

- We use [Base UI](https://base-ui.com/react/components/accordion) for the accordion component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/accordion) for the accordion style.
