UIforSaaSUIforSaaS

Setup Wizard

Multi-step onboarding wizard with profile setup, preferences, and skippable optional steps. Built with React Context for state management.

Preview

Features

  • 4-step flow: Welcome → Profile → Preferences → Complete
  • React Context for centralized state management
  • Simple dot indicator for progress
  • Skip button for optional steps (Profile, Preferences)
  • Back/Continue navigation
  • Form data persistence across steps
  • Compact theme toggle (Light/Dark/System)
  • Clean notification toggles
  • onComplete callback with collected data
  • Fully accessible with keyboard navigation

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

FilePath
setup-wizard.tsxcomponents/onboarding/setup-wizard/setup-wizard.tsx
setup-wizard-context.tsxcomponents/onboarding/setup-wizard/setup-wizard-context.tsx
wizard-steps.tsxcomponents/onboarding/setup-wizard/wizard-steps.tsx
step-welcome.tsxcomponents/onboarding/setup-wizard/step-welcome.tsx
step-profile.tsxcomponents/onboarding/setup-wizard/step-profile.tsx
step-preferences.tsxcomponents/onboarding/setup-wizard/step-preferences.tsx
step-complete.tsxcomponents/onboarding/setup-wizard/step-complete.tsx
types.tscomponents/onboarding/setup-wizard/types.ts
index.tscomponents/onboarding/setup-wizard/index.ts

Utility Files

FilePath
design-tokens.tslib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Code available with Pro

Unlock this component to download or copy the install files.

One-time $99. Updates included.

Component Files

The component consists of the following files:

1. setup-wizard.tsx

2. setup-wizard-context.tsx

3. wizard-steps.tsx

4. step-welcome.tsx

5. step-profile.tsx

6. step-preferences.tsx

7. step-complete.tsx

8. types.ts

9. index.ts

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

Usage

SetupWizard Props

PropTypeDefault
openbooleanrequired
onOpenChange(open: boolean) => voidrequired
onComplete(data: WizardData) => void-
initialDataPartial<WizardData>-