Skip to main content
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

Status Roll Badge

Max

Iris Grid Menu

Goo Reaction Bar

Status Badge Table

Resource details

PublishedJuly 10, 2026
CategoryMicro Interaction
ReactMotionTailwind CSS