# @asphalt-react/wizard > Wizard Latest version **2.16.0** (published 2026-07-28) · UNLICENSED license · 0 weekly downloads ## Install ```sh npm install @asphalt-react/wizard pnpm add @asphalt-react/wizard yarn add @asphalt-react/wizard bun add @asphalt-react/wizard ``` ## Health **Score 60/100 (C)** — status: active. Positive: esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 2.16.0 | | Published | 2026-07-28 | | First published | 2022-12-15 | | Weekly downloads | 0 | | License | UNLICENSED | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 65.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | UX Engineering - Web | | Maintainers | sayantan1211, dawn29, antoniomontana, goto.abhinav, elayudhanira-gojek, yessyprmtsr, soorajj | | Keywords | asphalt, wizard, component, dls, design language system, progress stepper | ## Links - npm: https://www.npmjs.com/package/@asphalt-react/wizard - Homepage: https://asphalt.pages.golabs.io/asphalt-react - npm.io page: https://npm.io/package/@asphalt-react/wizard ## Dependencies (4) - [classnames](https://npm.io/package/classnames.md) ^2.5.1 - [prop-types](https://npm.io/package/prop-types.md) ^15.8.1 - [@asphalt-react/helper](https://npm.io/package/@asphalt-react/helper.md) ^2.16.0 - [@asphalt-react/svg-normalizer](https://npm.io/package/@asphalt-react/svg-normalizer.md) ^2.16.0 ## Recent versions - 2.16.0 (latest) — 2026-07-28 - 2.0.0-alpha.29 (next) — 2023-12-15 - 2.15.1 — 2026-04-28 - 2.15.0 — 2026-04-13 - 2.14.0 — 2026-03-11 - 2.13.0 — 2026-02-19 - 2.12.2 — 2026-01-28 - 2.12.1 — 2025-12-19 - 2.12.0 — 2025-11-28 - 2.11.0 — 2025-11-10 - 2.10.0 — 2025-10-27 - 2.9.0 — 2025-10-02 - 2.8.1 — 2025-09-10 - 2.8.0 — 2025-08-14 - 2.6.0 — 2025-07-11 - … 16 more at https://npm.io/package/@asphalt-react/wizard/versions ## README # Wizard ![npm](https://img.shields.io/npm/dt/@asphalt-react/wizard?style=flat-square) [![npm version](https://badge.fury.io/js/@asphalt-react%2Fwizard.svg)](https://badge.fury.io/js/@asphalt-react%2Fwizard) Wizard is a component that guides the user through a set of predefined steps and helps to complete a large task or a process. Each Step of Wizard supports multiple intents, and can present some optional content with it. This pattern is also called as Progress stepper. ## Usage ```js import { Wizard, Step, StepContent, StepIndicator, StepLabel, WizardPath } from '@asphalt-react/wizard' 1 User Info 2 User Preferences 3 Checkout ``` ## Unit Components The Wizard component exports the Unit components: 1. Step 2. StepIndicator 3. StepContent 4. StepLabel 5. StepDescription 6. WizardPath Unit components under `Step` accepts *active* prop, that can be used to indicate the current or highlighted step. They also accept a *disabled* to make any step appear unavailable to the user. All intents *success*, *warning*, *danger* & *info* can be set to the `StepIndicator` component, with neutral appearance being the default. ## Building a Wizard Think of building a Wizard, as a series of `Step` components, connected with `WizardPath`. Each `Step` is composed of `StepIndicator` and optionally with `StepLabel` & `StepDescription` wrapped in a `StepContent` ## Orientation Wizard, by default renders itself and the steps horizontally. This can be changed by setting *vertical* prop to `Wizard` and `WizardPath`. [comment]: # "Wizard Props" ## Props ### vertical Enables vertical variant | type | required | default | | ---- | -------- | ------- | | bool | false | false | ### children Steps of wizard | type | required | default | | ---- | -------- | ------- | | node | true | N/A | # Step [comment]: # "Step Props" ## Props ### children Accepts indicator and content. | type | required | default | | ---- | -------- | ------- | | node | true | N/A | ### aside Enable aside behaviour. Aside behaviour allows indicator and content to be arranged horizontally. | type | required | default | | ---- | -------- | ------- | | bool | false | false | # StepIndicator [comment]: # "StepIndicator Props" ## Props ### children Children for StepIndicator. | type | required | default | | ---- | -------- | ------- | | node | false | null | ### size Controls size of the StepIndicator. Accepts m & l for medium & large respectively. | type | required | default | | ---- | -------- | ------- | | enum | false | "m" | ### aside Enables aside mode. | type | required | default | | ---- | -------- | ------- | | bool | false | N/A | ### success Applies success intent. | type | required | default | | ---- | -------- | ------- | | bool | false | false | ### info Applies information intent. | type | required | default | | ---- | -------- | ------- | | bool | false | false | ### danger Applies danger intent. | type | required | default | | ---- | -------- | ------- | | bool | false | false | ### warning Applies warning intent. | type | required | default | | ---- | -------- | ------- | | bool | false | false | ### active Active state of StepIndicator. | type | required | default | | ---- | -------- | ------- | | bool | false | false | ### disabled Disabled state of StepIndicator. | type | required | default | | ---- | -------- | ------- | | bool | false | false | # StepContent [comment]: # "StepContent Props" ## Props ### children React node for content. | type | required | default | | ---- | -------- | ------- | | node | false | N/A | ### aside Enables aside mode. | type | required | default | | ---- | -------- | ------- | | bool | false | N/A | # StepLabel [comment]: # "StepLabel Props" ## Props ### children Accepts text node for StepLabel. | type | required | default | | ---- | -------- | ------- | | node | false | N/A | ### active Active state of StepLabel. | type | required | default | | ---- | -------- | ------- | | bool | false | false | ### disabled Disabled state of StepLabel. | type | required | default | | ---- | -------- | ------- | | bool | false | false | # StepDescription [comment]: # "StepDescription Props" ## Props ### children React node for description. | type | required | default | | ---- | -------- | ------- | | node | true | N/A | ### disabled Disabled state of StepDescription. | type | required | default | | ---- | -------- | ------- | | bool | false | false | # WizardPath [comment]: # "WizardPath Props" ## Props ### completed Completed state for WizardPath. | type | required | default | | ---- | -------- | ------- | | bool | false | false | ### vertical Vertical mode for WizardPath. | type | required | default | | ---- | -------- | ------- | | bool | false | false | ### aside Assist in aside behaviour. | type | required | default | | ---- | -------- | ------- | | bool | false | N/A | ### size Controls size of the WizardPath. Accepts s, m, l for small, medium & large. | type | required | default | | ---- | -------- | ------- | | enum | false | "m" | --- _Source: https://npm.io/package/@asphalt-react/wizard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._