@progressive-development/pd-wizard

Multi-step wizard component for guided workflows and forms.

Features

• Lit 3 & TypeScript – Modern, type-safe web components
• Accessible – WCAG 2.1 compliant, keyboard navigation, ARIA support
• Themeable – CSS Custom Properties for easy customization
• Localized – Built-in i18n support (EN, DE, BE)
• Lightweight – No heavy dependencies, tree-shakeable
• Framework-agnostic – Works with React, Vue, Angular, or vanilla JS
• Event-Driven Navigation – Back/Next/Submit events for external validation between steps
• Clickable Progress Indicator – Visual step tracker with navigation to completed steps only
• Flexible Styling – CSS Custom Properties and CSS Parts for full control
• Flexible Step Configuration – Up to 6 steps with dynamic titles and optional next-button control

Installation

npm install @progressive-development/pd-wizard

Quick Start

<script type="module">
  import '@progressive-development/pd-wizard';
</script>

<pd-wizard .wizardSteps=${steps}>
  <div slot="step-1">Step 1 content</div>
  <div slot="step-2">Step 2 content</div>
</pd-wizard>

Components

| Component | Description | |-----------|-------------| | <pd-wizard> | Multi-step wizard container |

Documentation

📖 Full documentation: pd-components.web.app

License

MIT © PD Progressive Development UG