Wensity

Multi-Step Morphing Wizard

Pro

An onboarding card whose container physically reshapes to wrap each new step as the content slides in behind it.

heavy saas blocksmultistepmorphingwizardframer motion
Multi-Step Morphing Wizard component preview

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.