Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

Multi-Step Form Wizard

Pro

A multi-step form wizard whose card physically reshapes to wrap each new step as the content slides in behind it.

heavy saas blocksmultistepmorphingwizardframer motion
Multi-Step Form Wizard component preview

Overview

Multi-Step Form Wizard is a React and Tailwind CSS stepper for onboarding, checkout, and long forms, in Next.js or any React app, animated with Framer Motion. Each step is plain React content, and the card springs to its height while the next panel slides and unblurs in from the direction you are heading. A segmented progress bar and step counter track position, and Continue becomes Finish on the last step without the button changing width. Finish calls onComplete and then returns to step one, so navigate away or unmount inside onComplete to show a success state.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add multi-step-morphing-wizard

Usage

Import MultiStepMorphingWizard from @/components/wensity/multi-step-morphing-wizard and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import {
  MultiStepMorphingWizard,
  type WizardStep,
} from "@/components/wensity/multi-step-morphing-wizard";


const steps: WizardStep[] = [
  { id: "account", label: "Account", content: <div className="space-y-3"><p>Create your account</p></div> },
  { id: "workspace", label: "Workspace", content: <div className="space-y-3"><p>Name your workspace</p></div> },
  { id: "ready", label: "Ready", content: <div className="space-y-3"><p>You&apos;re all set!</p></div> },
];


export function MultiStepMorphingWizardDemo() {
  return (
    <MultiStepMorphingWizard
      steps={steps}
      onComplete={() => console.log("Wizard complete")}
    />
  );
}

Props

PropTypeDefaultDescription
stepsWizardStep[]-Ordered wizard steps with id, label, and content.
onComplete() => void-Called when the wizard Finish button is pressed.
defaultIndexnumber0Optional initial step index.

Related components

  • Fluid Drag-and-Drop Kanban component preview

    Fluid Drag-and-Drop Kanban

    A Trello-grade board running real pointer physics, where every card tilts toward the velocity you throw it across at.

  • GitHub-Style Activity Grid component preview

    GitHub-Style Activity Grid

    365 squares sharing one tooltip that flies between days on rails, with a reveal that ripples backward from today.

  • KPI Card with Sparkline component preview

    KPI Card with Sparkline

    Dashboard KPI cards with a smooth SVG sparkline chart and a glowing dot that snaps to whichever value you scrub across.

  • Subscription Tier Card component preview

    Subscription Tier Card

    Pricing cards with a monthly and annual toggle, prices that spring to new values, and a highlighted plan in a brand glow.