Step Flow — React Component

A responsive four-step process section with a sliding highlight, animated image swaps, and hover or click step selection.

Feature Sectionshoverspringlayoutstepsprocessfeaturehovermotionframer-motion

Step Flow

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

defaultStep

Initial active step index.

highlightColor

Color used by the moving active step panel.

autoPlay

Automatically advance through steps.

autoPlayInterval

Delay between auto-play step changes in milliseconds.

textClassName

ClassName for the step list column.

imageClassName

ClassName for the image preview column.

Generated JSX

Copy this into your page.

<StepFlow
  defaultStep={0}
  highlightColor="rgb(229 229 229)"
  autoPlay={false}
  autoPlayInterval={3500}
  textClassName=""
  imageClassName=""
/>

Animation effects

hoverspringlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Installation

Step Flow

Shape the component before you copy it.

Animation effects