Responsive Dynamic Multi-Step Form for Next.js – Next-stepper

The Next-stepper allows you to build dynamic, interactive, step-by-step form in Next.js-powered web applications. Styled with the latest shacn/ui component library.

It supports dynamic navigation, progress tracking, and conditional filtering of steps. Users progress through the form in a clear, sequential manner. This is ideal for applications that require the collection of detailed information in an organized, user-friendly format.

Features

Use Cases

• User Onboarding: Create guided onboarding flows to collect necessary information from new users, simplifying registration and setup.
• Complex Surveys: Build multi-stage surveys that adapt based on user answers, ensuring relevant questions are presented.
• Application Forms: Develop structured application processes for services or programs, guiding users through required information in logical steps.
• Product Configuration: Enable users to customize products or services through a series of choices, making the configuration process clear and intuitive.
• Event Registration: Manage event registrations with step-by-step data collection, including personal information, preferences, and payment details.

Usage

1. Install Required Packages:

npm install zustand framer-motion

2. Add Shadcn/UI Components:

npx shadcn-ui@latest add card button progress

3. Copy Component Files:

• Paste the component code from the Next-Stepper repository.
• Create a new file at components/ui/multi-step-form.tsx.

4. Import the MultiStepForm component and define the steps:

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
      },
      // Additional items
    ],
  },
  // Additional steps
];
export default function FormContainer() {
  return <MultiStepForm steps={formSteps} />;
}

Related Resources

• Next.js Documentation: Official React framework documentation for deeper understanding of Next.js capabilities.
• Shadcn/UI Components: Customizable React component library for building elegant interfaces.
• Zustand State Management: Lightweight and flexible state management solution for React applications.
• Framer Motion Animations: Powerful animation library for creating smooth, interactive web experiences.

FAQs

Q: Can I customize the appearance of the steps?
A: Yes, you can customize the steps by adding icons, images, and detailed descriptions. The shadcn/ui library also allows for further styling customization.

Q: Is it possible to have conditional logic between steps?
A: Yes, you can define validNextSteps for each item to conditionally display steps based on previous selections.

Q: How does Next-stepper handle form state management?
A: Next-stepper uses Zustand for efficient and straightforward state management, ensuring smooth transitions and data handling.

Preview