Accordion Motion 2 - Motion with Spring

Pro

Accordion with a spring-like easing curve that slightly overshoots on open.

Shadcn Accordion Motion 2 component

Component data

ID
accordion/accordion-motion-2
Access
pro
Created
Oct 30, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Accordion Motion 2 component design & features

An inline animation duration and an overshooting cubic-bezier curve on AccordionContent give the height animation a small spring at the end.

Use a spring when the accordion is a focal interaction, such as a billing or plan FAQ, and the default ease feels flat.