Installation

npm install react-form-wizard-component

That is the whole dependency footprint — the package has zero runtime dependencies. React is a peer dependency you already have.

Requirements

Import the stylesheet

The component ships an extractable stylesheet rather than injecting CSS at runtime, so you import it once:

import "react-form-wizard-component/styles.css";

Anywhere in your app is fine — main.tsx, App.tsx, or app/layout.tsx in Next.js. Import it once, not per component.

Skipping the stylesheet is only correct in unstyled mode, where you supply all the CSS.

Icons (optional)

Step icons take a class-name string, so any icon font works. The examples use Themify:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css"
/>

You can pass a React node instead and skip icon fonts entirely:

<FormWizard.TabContent title="Account" icon={<UserIcon />}>

Verify the install

npm ls react-form-wizard-component
npx tsc --noEmit

Types resolve from the package itself. If tsc reports TS7016: Could not find a declaration file, you are on 1.1.1 or older — that was a packaging bug, fixed in 1.2.0. Upgrade:

npm install react-form-wizard-component@latest

CDN

For a no-build page, the UMD bundle exposes a FormWizard global:

<link
  rel="stylesheet"
  href="https://unpkg.com/react-form-wizard-component/dist/react-form-wizard-component.css"
/>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-form-wizard-component"></script>

Next

• Your first wizard — a working form in about twenty lines
• Framework setup — Next.js, Vite, Remix, CRA