React Wizard

React Wizard (react-bootstrap-wizard) is an open-source React component for splitting a complicated form or flow into multiple steps, built with reactstrap and Bootstrap. It takes an array of step definitions — each with a name, icon, component, and optional props — and renders a navigable multi-step wizard with support for per-step validation and a finish callback. The package is published on npm (current version 0.0.9) and distributed under the MIT license.

What is react-bootstrap-wizard?

react-bootstrap-wizard is a React component package that turns a list of step components into a wizard UI. You provide a steps array where each entry contains a stepName, stepIcon, component, and optionally stepProps, and the wizard generates navigation tabs, step content, and Previous/Next/Finish buttons. It runs on React and depends on reactstrap and Bootstrap CSS, which must be installed separately. The component supports both class components and function components (via React.forwardRef and React.useImperativeHandle).

Key Features

• Step-based navigation — Define steps as an array of objects with stepName, stepIcon, component, and stepProps; the wizard renders nav tabs and the active step's content.
• Validation control — Set the validate prop to true and implement an isValidated function in each step component; the wizard will block advancing until that function returns true.
• Finish callback — Pass a finishButtonClick function to receive an object containing the state of every step when the user clicks Finish.
• Customizable button text — previousButtonText, nextButtonText, and finishButtonText accept strings or React nodes, and each button can get extra classes via previousButtonClasses, nextButtonClasses, and finishButtonClasses.
• Five color schemes — The color prop accepts primary, green, orange, red, or blue to set the header background color.
• Header and display options — Add a title and description, center them with headerTextCenter, make step tabs clickable with navSteps, or swap the moving tab indicator for a progress bar using progressbar.
• Included styles — Import either react-wizard.css or react-wizard.scss directly from the package (dist folder) to get the wizard's styling.
• Next.js support — The README documents using next/dynamic and server-side globals to integrate the wizard into Next.js projects.

Who is it for?

• React developers who need a ready-made multi-step form or checkout flow and want to avoid writing navigation logic from scratch.
• Teams already using reactstrap and Bootstrap — the component is built on reactstrap components and Bootstrap styles, so it fits naturally into existing Bootstrap-based React apps.
• Developers with per-step validation requirements — the isValidated contract lets each step decide whether the user can proceed, with a safe default of true for steps that don't define it.
• Next.js projects needing a wizard with server-side rendering compatibility, thanks to the provided dynamic import pattern.

What can you do with react-bootstrap-wizard?

• Multi-step forms: Split a registration flow into steps like About, Account, and Address, each rendered by its own component, and collect all step state on completion.
• Checkout flows: Guide users through cart, shipping, and payment stages while accumulating data from each step via the finishButtonClick callback.
• Onboarding wizards: Create a clickable step-by-step onboarding interface using the navSteps and progressbar options to improve user orientation.

How does react-bootstrap-wizard work?

Install the package with npm install react-bootstrap-wizard, then import ReactWizard and render it with a steps array and optional props. Each step component can expose an isValidated function and its own state; the wizard accesses these through refs, calling isValidated before allowing the user to advance. When the user clicks Finish, the wizard invokes finishButtonClick with an object containing all step states.

Pricing

react-bootstrap-wizard is free and open source. The repository badge shows the MIT license, and the npm package is published publicly with no paid tiers mentioned.

FAQ

How do I validate steps?

Set the validate prop to true on ReactWizard and implement an isValidated function with no parameters in each step component. If the function returns true, the user can proceed; if false, they are blocked. Steps without an isValidated function are treated as valid by default.

How do I use function components?

Function components must use React.forwardRef to forward a ref, then use React.useImperativeHandle to expose an isValidated function and a state object. This lets the wizard access those through the ref, as shown in the README's function component example.

Can I use react-bootstrap-wizard with Next.js?

Yes. The README recommends importing the component with next/dynamic and defining placeholder window and document globals when running server-side. This prevents SSR errors while keeping the wizard client-side.

What dependencies do I need?

You need to install reactstrap and bootstrap alongside react-bootstrap-wizard. The component relies on reactstrap's components and Bootstrap's CSS for layout and styling, so both are required for it to render correctly.