Back
Multi Step Form
Multi-step form wizard with Zustand state management, step navigation, form validation with Zod, and progress tracking. Perfect for onboarding flows and complex forms.
Next.jsForms
What's Included
Multi-Step Form Wizard
Zustand State Management
Step Navigation (Next/Prev)
Form Validation with Zod
Progress Tracking
Responsive Design
Installation
terminal
$ pnpm dlx shadcn@latest add https://jb.desishub.com/r/multi-step-form.jsonHow to Use
1
Install the component
Run the shadcn CLI to add the multi-step form.
pnpm dlx shadcn@latest add https://jb.desishub.com/r/multi-step-form.json2
Configure your form steps
Define the steps and their validation schemas.
import { useFormStore } from '@/store/form-store'
// The form store manages step navigation
// and form data persistence across steps3
Use the MultiStepForm component
Import and render the multi-step form in your page.
import { MultiStepForm } from '@/components/multi-step-form'
export default function OnboardingPage() {
return <MultiStepForm />
}Free
Open source component
Free to use · MIT License
CategoryForms
PlatformsNext.js
Features6
Resources