next-stepper

A dynamic multi-step form built with Next.js and styled using shadcn/ui. This project showcases how to create smooth, step-based workflows with modern components and responsive design.

Preview

Features

• 🎯 Dynamic multi-step navigation with progress tracking
• 🔄 Conditional step filtering based on previous selections
• 📱 Fully responsive and mobile-friendly
• 🎨 Beautiful UI with shadcn/ui components
• ⚡ Fast and smooth transitions with Framer Motion
• 💾 Efficient state management with Zustand
• 🔍 Optional icons and images for steps
• 📋 Form completion summary

Installation

1. Install Required Packages

npm install zustand framer-motion

2. Install Required shadcn/ui Components

npx shadcn-ui@latest add card button progress

3. Copy Component Files

Create a new file components/ui/multi-step-form.tsx and copy the component code from the repository.

Usage

Basic Implementation

import MultiStepForm, { type FormStep } from '@/components/ui/multi-step-form'

const formSteps: FormStep[] = [
  {
    id: 'step-1',
    title: 'Choose Type',
    description: 'Optional step description',
    items: [
      {
        id: 'item-1',
        title: 'Option 1',
        description: 'Description for option 1',
        icon: Icon1,                    // Optional: Lucide icon
        image: '/path/to/image.jpg',    // Optional: Image URL
        validNextSteps: ['next-item-1'] // Optional: Filter next step options
      }
      // More items...
    ]
  }
  // More steps...
]

export default function FormContainer() {
  return <MultiStepForm steps={steps} />
}

Complete Implementation Example

Check out our live interactive demo to see the form in action, and explore our comprehensive implementation example in the extended form component.

Demo | extended-form.tsx

Packages

• Next.js - The leading React framework
• shadcn/ui - Modern, customizable component library
• Framer Motion - Powerful animations
• Zustand - Lightweight state management
• Lucide React - Beautiful icons
• Tailwind CSS - Utility-first CSS

TODO

• Demo implementation
• Add compact pre-built template
• Add an optional form completion summary
• Add optional custom form input in the end step
• Add optional multi-step form with different imput types
• Implement form validation schemas
• Add more customization options for step cards
• Create more pre-built templates
• Support for dynamic step generation

Contributing

Contributions are welcome! Please submit an issue or pull request if you have suggestions or improvements.

License

This project is licensed under the MIT License.