Agents / Interaction
Multi-step flow
Guide a shared human-agent workflow through review and completion.
Registry
Checking browser…
- 1Dates
- 2Details
- 3Review
Dates
Activity 0
Run a tool to see its activity here.
Installation
Add the registry entry to your app.
npx shadcn@latest add @fabrials/wizardWithout the named registry, use the address:
https://ui.fabrials.com/r/wizard.json
API reference
| Prop / export | Type | Description |
|---|---|---|
steps | WizardStep[] | Title, content and optional async validation. |
step | number | Controlled zero-based step. |
onStepChange | (step) => void | Update the active step. |
onComplete | () => Promise<unknown> | Completion action. |
Behavior
Register a prepare tool to populate fields and advance to review. The final business operation belongs to your completion handler.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.