Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/wizard.tsx@viliha/vui-react/wizardThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import { Wizard, WizardSection } from "@viliha/vui-react/wizard";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| Wizard | component | — |
| WizardSection | component | — |
Wizard props
| Prop | Type | Default | What it does |
|---|---|---|---|
| steps | Step[] | — | Named steps ("workflows") — drives the stepper. One entry per step. |
| current | number | — | Zero-based index of the active step (you own this state + all logic). |
| children | React.ReactNode | — | The active step's body — compose it from {@link WizardSection}s. |
| onBack? | () => void | — | |
| onNext? | () => void | — | |
| backLabel? | React.ReactNode | — | Footer button contents — pass a node to fully customise (e.g. the final step's "Create account"). Defaults include Back/Next arrows. |
| nextLabel? | React.ReactNode | — | |
| backDisabled? | boolean | — | |
| nextDisabled? | boolean | — | |
| footer? | React.ReactNode | — | Replace the whole Back/Next footer. |
| hideFooter? | boolean | — | Hide the footer (e.g. on a success screen). |
| className? | string | — |
WizardSection props
| Prop | Type | Default |
|---|---|---|
| title? | string | — |
| description? | string | — |
| icon? | IconType | — |
| className? | string | — |
| children | React.ReactNode | — |
Customize
Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.