Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA multi-step flow in one dialog with per-step validation, a progress list, focus moved to each new step heading and a final action that locks the dialog while it runs.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for short setup flows of two to five steps that belong on top of the current page: create a workspace, connect a source, invite a team.
Do not use it for long onboarding (use a page) or for steps that need to be reachable by URL. Do not use it when one form would do.
It builds on dialog and button, which the CLI installs for you.
| Prop | Type | Default | Description |
|---|---|---|---|
open / onOpenChange | boolean / fn | - | Dialog state. |
title | string | - | Dialog title. |
steps | { id, title, description?, content, validate? }[] | - | The steps. validate may be async and returns an error message to block Next. |
onComplete | () => void | Promise<void> | - | Runs on the last step. A rejection keeps the dialog open. |
finishLabel | string | Finish | Label of the final button. |
dialog: the title names it and "Step 2 of 3" is its description.aria-current="step" and spells out done or current in hidden text.validate or onComplete shows a role="alert" message and keeps the person on the step; focus moves to the new step heading after Back and Next.| Key | Action |
|---|---|
| Tab | stays inside the dialog |
| Enter | activates the focused button |
| Escape | closes (not while the final action runs) |
The component ships a Testing Library test (step-dialog.test.tsx) that covers progress semantics, blocked Next with an alert, forward and back with heading focus, finishing and resetting.