Accordion Motion 3 - Motion with Staggered List

Pro

Accordion whose list items fade in one after another when a panel opens.

Shadcn Accordion Motion 3 component

Component data

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

Accordion Motion 3 component design & features

Each panel holds a checklist of features. The rows fade and slide in from the left with a 60ms stagger, driven by an inline animation delay per row.

Staggered rows help plan or feature comparisons where each line should be read in turn.