A multi-step form for Next.js built on top of shadcn/ui complete with desktop and mobile responsiveness.
- ⚙️ URL state based
- 🎨 @shadcn based
- ♾️ 1 to many step
- 🍳 Easy to use
- Next.js 15
- React Context
- Shadcn/ui
- Tailwind CSS
- TypeScript
You can install the component using the Shadcn CLI
npx shadcn add https://multistep-form-sooty.vercel.app/registry/multistep-01.json
Wrap your steps inside StepProvider
. The order of the steps is determined by
their placement within the StepProvider. Example:
"use client";
export default function Page() {
return (
<StepProvider>
<Login />
<Synchronize />
<CreateTeam />
</StepProvider>
)
}
You can control the step flow directly from your step components using
useStep
.
export function Login() {
const {
goToNextStep,
goToPrevStep,
canGoToNextStep,
canGoToPrevStep,
setStep,
reset,
currentStep,
} = useStep();
return <Button onClick={goToNextStep}>Next step</Button>;
}
You also have to add some description about your steps inside headerData
object
you will find it inside @/components/step-header.tsx
.