Accordion

An accordion is a vertically stacked set of expandable panels, each containing an interactive header and an associated content area.

  • Full keyboard navigation

  • Can be controlled or uncontrolled

  • Can expand one or multiple items

  • Animated with Motion

  • Animated indicator icon

  • Respects reduce motion with system settings and through props

Pure UI

Installation

Loading...

Usage

<Accordion>
  <AccordionItem>
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
</Accordion>

Examples

Reduce Motion

Animation Presets

Motion

Motion Blur

Perspective

Perspective Blur

Fade

Scale

None

Custom Animation

You can use any Motion Animation values:

Learn more

Transition Presets

Each animation comes with predefined transitionPreset

Alternatively, you can choose transition from this list:

  • default
  • anticipate
  • quickOut
  • overshootOut
  • swiftOut
  • snappyOut
  • inOut
  • inQuad
  • inCubic
  • inQuart
  • inQuint
  • inExpo
  • inCirc
  • outQuad
  • outCubic
  • outQuart
  • outQuint
  • outExpo
  • outCirc
  • inOutQuad
  • inOutCubic
  • inOutQuart
  • inOutQuint
  • inOutExpo
  • inOutCirc
  • inOutBase
  • in
  • out
  • linear

Additionaly, you can control the duration of the transition:

<Accordion
  animationPreset="motion"
  transitionPreset={{
    ease: "inOutExpo",
    duration: 0.6,
  }}
/>

Custom Transitions

You can use any Motion Transition values:

Learn more

Custom Icon

You can use any React node as an icon:

API Reference

Accordion

PropTypeDefault
animation
AnimationProps
―
animationPreset
enum
"motion"
transition
Transition
―
transitionPreset
enumTransitionPreset
―
reduceMotion
boolean
false

Support all Root Radix API

Item

Support all Radix API

Trigger

PropTypeDefault
icon
ReactNode | ((props: { isOpen: boolean }) => ReactNode) | null
―

Support all Radix API

Content

Support all Radix API

Next ⮡Badge