Accordion Motion 1 - Motion with Fade

Pro

Accordion whose answer text fades and slides in as the panel opens.

Shadcn Accordion Motion 1 component

Component data

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

Accordion Motion 1 component design & features

The panel height animates as usual, and the answer paragraph also fades in and slides down a few pixels. The effect replays every time an item opens.

A light content fade makes long FAQ lists feel smoother without changing their layout.