"use client"; import { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Check } from "lucide-react"; import { cn } from "@/lib/utils"; const STEPS = ["Account", "Profile", "Confirm"] as const; export function MultiStepForm({ className }: { className?: string }) { const [step, setStep] = useState(0); const [direction, setDirection] = useState(1); const [done, setDone] = useState(false); function go(next: number) { setDirection(next > step ? 1 : -1); if (next >= STEPS.length) { setDone(true); return; } setStep(Math.max(0, next)); } return (

Step {Math.min(step + 1, STEPS.length)} of {STEPS.length} {STEPS[step]}

{done ? (

All set!

Your account is ready to go.

) : ( {step === 0 && ( <>

Let's create your account.

)} {step === 1 && ( <>

Tell us a bit about you.

)} {step === 2 && ( <>

Review and confirm your details.

Everything looks good.

)} )}

{!done && (

go(step + 1)} className="rounded-lg bg-brand px-5 py-2 text-sm font-medium text-white" > {step === STEPS.length - 1 ? "Finish" : "Continue"}

)}

); } export default function Demo() { return (

); }

Multi-Step Form