Wizard
A multi-step stacked dialog for onboarding flows, setup wizards, and guided processes.
Installation
tsx
import { Wizard, WizardStep, WizardFooter, WizardBack, WizardNext } from "madagent";Basic
With Description
Sizes
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<Wizard open={open} onClose={() => setOpen(false)} dir="rtl">
<WizardStep title="إنشاء حساب" description="أدخل بياناتك للبدء">
<p>اختر الحسابات التي تريد ربطها.</p>
<WizardFooter>
<WizardBack>رجوع</WizardBack>
<WizardNext>التالي</WizardNext>
</WizardFooter>
</WizardStep>
</Wizard>Wizard
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controls whether the wizard is visible |
onClose | () => void | - | Called when the wizard should close |
defaultStep | number | 0 | Initial step index |
size | "sm""md""lg" | "md" | Dialog width |
closable | boolean | true | Whether close button, Escape, and overlay click are enabled |
children | ReactNode | - | WizardStep elements |
WizardStep
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | - | Step heading in the header |
description | string | - | Subtitle below the title |
children | ReactNode | - | Step content and optional WizardFooter |
WizardFooter
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Footer content — typically WizardBack and WizardNext |
WizardBack
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | "Back" | Custom label |
WizardNext
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | "Next" / "Done" | Custom label — defaults to Done on last step |