Skip to main content

react-sequent

Simple, flexible, multi-step flows without boilerplate

npm i react-sequent

Zero Config

No state machine definitions, no transition maps. Each step decides what comes next with a plain function call.

Async-First

Dynamic imports and backend fetches just work. Suspense built-in — your step components stay clean.

Chrome-Stable

Modal headers, progress bars, and other stable UI stay mounted across step transitions and async loading.

Animated Transitions

Crossfade, slide, or choreograph step changes with a transition render prop — wire it to CSS, framer-motion, or GSAP.

The step decides what comes next

Most wizard libraries require a centralized state map that knows every step and transition upfront. react-sequent inverts this — transitions emerge from step-level logic. Add, remove, or reorder steps without touching a config. Branching is an if statement, not a schema.

Is this the right fit for my project?

react-sequent's opinionated design encourages isolated, self-contained, reusable steps and atomic fire-and-forget flow control semantics. If your flows are UX-centric and a rigid state machine is unnecessary overhead, react-sequent can help you iterate faster with less.

react-sequentAlternatives (XState, React Flow, etc.)
Opinionated?Opinionated on architecture, not structure.Opinionated on architecture and structure.
Iteration and prototyping pace?Fast iteration and prototyping.Slower iteration due to coupled state management.
Boilerplate?As much as you need, as little as none.Always some boilerplate - depends on the utility.
Flow Specialization?Short, simple flows.Long, complex, or context-sensitive flows.
Observability?Built-in customizable error states with full context and recovery.Manual error handling usually required.
State Space?Implicit; Emergent. Easier to reason about individual steps and transitions.Explicit; Rigid. Easier to get the full picture.