Multi-Step Form

A multi-step subscription form built with React Router v7, Material UI, react-hook-form, and Zod validation. Features a 4-step flow with state management across routes.

---

Features

• 4-step form flow: Contact Info -> Billing -> Add-ons -> Summary
• Zod schema validation with real-time error feedback
• State persistence across route transitions
• Responsive design with Material UI components
• React Router v7 with type-safe routing
• MUI theme customization with custom palette

Tech Stack

• Framework: React Router v7, Vite
• Language: TypeScript
• UI: Material UI 7 (@mui/material), Emotion
• Forms: react-hook-form, @hookform/resolvers, Zod
• Typography: @fontsource/ubuntu
• Package Manager: pnpm

Getting Started

git clone https://github.com/dev0xgenius/multi-step-form.git
cd multi-step-form
pnpm install
pnpm dev

Routes

Path	Step	Description
/	Step 1	Contact Info (name, email, phone)
/billing	Step 2	Select plan (Arcade/Advanced/Pro, Monthly/Yearly)
/extras	Step 3	Add-on services
/summary	Step 4	Review and confirm
/summary/:formID	Confirmation	Thank you page

Project Structure

app/
  root.tsx            # Layout with ThemeProvider + form state
  routes.ts           # Route configuration
  routes/
    contact-info.tsx  # Step 1 - personal details form
    billing.tsx       # Step 2 - plan selection
    extras.tsx        # Step 3 - add-ons
    summary.tsx       # Step 4 - review + submit
    thankyou.tsx      # Confirmation page
  components/
    Header.tsx        # Step indicator sidebar
    Footer.tsx        # Navigation buttons
    CustomCard.tsx    # Reusable card wrapper
    BillingCard.tsx   # Plan option card
    BillingList.tsx   # Plan selection list
    SwitchSelect.tsx  # Monthly/Yearly toggle
    AddOns.tsx        # Add-on checklist
    TabButton.tsx     # Step navigation tabs
  lib/
    types.ts          # TypeScript + Zod schemas
    utils.ts          # Form state reducer
  theme/
    index.ts          # MUI theme configuration

Author

0xgenius - GitHub