Max
Spring Split Accordion
Rows sit joined as one rounded stack; opening an item splits the stack apart with a bouncy spring as corners round and a gap opens around the active row. Content springs to a ResizeObserver-measured height, closed panels are inert-gated, and headers have full keyboard travel — arrows, Home/End, Escape.
Micro InteractionReactMotionTailwind CSS
Manual
Create a file and paste the following code into it.
Update the import paths to match your project setup.
Similar components
Resource details
PublishedJuly 10, 2026
CategoryMicro Interaction
ReactMotionTailwind CSS
Unlock with MaxResource details
PublishedJuly 10, 2026
CategoryMicro Interaction
ReactMotionTailwind CSS