Overview

Multi Step Form is an open-source, four-step subscription form built by Marcos V Fitzsimons with Next.js 13, Tailwind CSS, shadcn/ui and Framer Motion. Users enter personal info, select a plan, choose add-ons and review a summary before confirming their order, with animated transitions between steps.

The project is a compact reference for building wizard-style forms in React. Step state is handled by a custom useMultiplestepForm hook, each step lives in its own component (user info, plan, add-ons, final step and success message), and the layout follows a mobile-first approach with a step sidebar.

Features

Four steps: Your info, select plan, add-ons and summary, tracked in a sidebar.
Order summary: The final step shows all selections and a confirmation action, followed by a success message.
Custom hook: useMultiplestepForm manages the current step and navigation between steps.
Animated transitions: Framer Motion animates the change from one step to the next.
shadcn/ui inputs: Button, checkbox, input, label, radio group, separator and switch components built on Radix UI.
Responsive layout: The interface adapts its layout to the device's screen size.
Interaction states: Hover and focus states on all interactive elements.

Tech stack

Next.js 13, React 18, TypeScript
Tailwind CSS, shadcn/ui, Radix UI, Framer Motion, lucide-react