Features This multi-step onboarding wizard includes:
Responsive Design - Works beautifully on mobile and desktop Progress Tracking - Visual step indicator with completed checkmarks Form Validation - Client-side validation with error messages Smooth Transitions - Step transitions with directional animations Dark Mode Support - Styled for both light and dark themes Accessibility - Proper labels, focus states, and semantic HTML Complete Form Flow - Personal info → Company details → Preferences → Completion To use this component, you'll need to install Framer Motion for the animations:
bash npm install framer-motion The component handles a complete user onboarding flow with validation at each step and a final completion screen that summarizes the collected information.
import OnboardingWizard from "@/components/ui/multi-step-wizard";
export default function DemoOne() {
return <OnboardingWizard />;
}