Animated Accordion

Expandable sections that reveal their answers with a staggered fade.

@base-ui/reactmotiontailwind-merge

Tune the Real Props

Themecaffeine

Colour palette. Any theme but Default also tints the questions, icon and hover line.

Modedark

Light or dark version of the chosen palette.

Border roundnessrounded-lg

Corner radius of the outer border. Needs Border on.

Duration

How long opening and closing take, in seconds.

Bounce

How much the springs overshoot. Needs Elastic on.

Delay

Wait before the answer's paragraphs start fading in, in seconds.

Stagger

Gap between each paragraph's fade-in, in seconds.

Fill colourprimary

Background colour of an open item. Needs Fill on.

Fill roundnessrounded-none

Corner radius of an open item's fill. Needs Fill on.

Iconplus

Plus that turns into a minus, or a chevron that flips.

Request a Custom Animation

Need a custom effect? Tell us what to create.