{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multiple-step-form-demo",
  "title": "Multiple Step Form Demo",
  "description": "component for the Multiple Step Form Demo",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "sonner"
  ],
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label",
    "radio-group",
    "textarea",
    "select"
  ],
  "files": [
    {
      "path": "app/registry/multistepform/multistepdemo.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight, Check, Loader2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { toast } from \"sonner\";\nimport { cn } from \"@/lib/utils\";\n\nconst steps = [\n  { id: \"personal\", title: \"Personal Info\" },\n  { id: \"professional\", title: \"Professional\" },\n  { id: \"goals\", title: \"Website Goals\" },\n  { id: \"design\", title: \"Design\" },\n  { id: \"budget\", title: \"Budget\" },\n  { id: \"requirements\", title: \"Requirements\" },\n];\n\ninterface FormData {\n  name: string;\n  email: string;\n  company: string;\n  profession: string;\n  experience: string;\n  industry: string;\n  primaryGoal: string;\n  targetAudience: string;\n  contentTypes: string[];\n  colorPreference: string;\n  stylePreference: string;\n  inspirations: string;\n  budget: string;\n  timeline: string;\n  features: string[];\n  additionalInfo: string;\n}\n\nconst fadeInUp = {\n  hidden: { opacity: 0, y: 20 },\n  visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },\n};\n\nconst contentVariants = {\n  hidden: { opacity: 0, x: 50 },\n  visible: { opacity: 1, x: 0, transition: { duration: 0.3 } },\n  exit: { opacity: 0, x: -50, transition: { duration: 0.2 } },\n};\n\nconst OnboardingForm = () => {\n  const [currentStep, setCurrentStep] = useState(0);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [formData, setFormData] = useState<FormData>({\n    name: \"\",\n    email: \"\",\n    company: \"\",\n    profession: \"\",\n    experience: \"\",\n    industry: \"\",\n    primaryGoal: \"\",\n    targetAudience: \"\",\n    contentTypes: [],\n    colorPreference: \"\",\n    stylePreference: \"\",\n    inspirations: \"\",\n    budget: \"\",\n    timeline: \"\",\n    features: [],\n    additionalInfo: \"\",\n  });\n\n  const updateFormData = (field: keyof FormData, value: string) => {\n    setFormData((prev) => ({ ...prev, [field]: value }));\n  };\n\n  const toggleFeature = (feature: string) => {\n    setFormData((prev) => {\n      const features = [...prev.features];\n      if (features.includes(feature)) {\n        return { ...prev, features: features.filter((f) => f !== feature) };\n      } else {\n        return { ...prev, features: [...features, feature] };\n      }\n    });\n  };\n\n  const toggleContentType = (type: string) => {\n    setFormData((prev) => {\n      const types = [...prev.contentTypes];\n      if (types.includes(type)) {\n        return { ...prev, contentTypes: types.filter((t) => t !== type) };\n      } else {\n        return { ...prev, contentTypes: [...types, type] };\n      }\n    });\n  };\n\n  const nextStep = () => {\n    if (currentStep < steps.length - 1) {\n      setCurrentStep((prev) => prev + 1);\n    }\n  };\n\n  const prevStep = () => {\n    if (currentStep > 0) {\n      setCurrentStep((prev) => prev - 1);\n    }\n  };\n\n  const handleSubmit = () => {\n    setIsSubmitting(true);\n\n    // Simulate API call\n    setTimeout(() => {\n      toast.success(\"Form submitted successfully!\");\n      setIsSubmitting(false);\n    }, 1500);\n  };\n\n  // Check if step is valid for next button\n  const isStepValid = () => {\n    switch (currentStep) {\n      case 0:\n        return formData.name.trim() !== \"\" && formData.email.trim() !== \"\";\n      case 1:\n        return formData.profession.trim() !== \"\" && formData.industry !== \"\";\n      case 2:\n        return formData.primaryGoal !== \"\";\n      case 3:\n        return formData.stylePreference !== \"\";\n      case 4:\n        return formData.budget !== \"\" && formData.timeline !== \"\";\n      default:\n        return true;\n    }\n  };\n\n  const preventDefault = (e: React.MouseEvent) => {\n    e.preventDefault();\n  };\n\n  return (\n    <div className=\"w-full max-w-lg mx-auto py-8\">\n      {/* Progress indicator */}\n      <motion.div\n        className=\"mb-8\"\n        initial={{ opacity: 0, y: -20 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5 }}\n      >\n        <div className=\"flex justify-between mb-2\">\n          {steps.map((step, index) => (\n            <motion.div\n              key={index}\n              className=\"flex flex-col items-center\"\n              whileHover={{ scale: 1.1 }}\n            >\n              <motion.div\n                className={cn(\n                  \"w-4 h-4 rounded-full cursor-pointer transition-colors duration-300\",\n                  index < currentStep\n                    ? \"bg-primary\"\n                    : index === currentStep\n                      ? \"bg-primary ring-4 ring-primary/20\"\n                      : \"bg-muted\",\n                )}\n                onClick={() => {\n                  // Only allow going back or to completed steps\n                  if (index <= currentStep) {\n                    setCurrentStep(index);\n                  }\n                }}\n                whileTap={{ scale: 0.95 }}\n              />\n              <motion.span\n                className={cn(\n                  \"text-xs mt-1.5 hidden sm:block\",\n                  index === currentStep\n                    ? \"text-primary font-medium\"\n                    : \"text-muted-foreground\",\n                )}\n              >\n                {step.title}\n              </motion.span>\n            </motion.div>\n          ))}\n        </div>\n        <div className=\"w-full bg-muted h-1.5 rounded-full overflow-hidden mt-2\">\n          <motion.div\n            className=\"h-full bg-primary\"\n            initial={{ width: 0 }}\n            animate={{ width: `${(currentStep / (steps.length - 1)) * 100}%` }}\n            transition={{ duration: 0.3 }}\n          />\n        </div>\n      </motion.div>\n\n      {/* Form card */}\n      <motion.div\n        initial={{ opacity: 0, y: 20 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, delay: 0.2 }}\n      >\n        <Card className=\"border shadow-md rounded-3xl overflow-hidden\">\n          <div>\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={currentStep}\n                initial=\"hidden\"\n                animate=\"visible\"\n                exit=\"exit\"\n                variants={contentVariants}\n              >\n                {/* Step 1: Personal Info */}\n                {currentStep === 0 && (\n                  <>\n                    <CardHeader>\n                      <CardTitle>Tell us about yourself</CardTitle>\n                      <CardDescription>\n                        Let&apos;s start with some basic information\n                      </CardDescription>\n                    </CardHeader>\n                    <CardContent className=\"space-y-4\">\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label htmlFor=\"name\">Full Name</Label>\n                        <Input\n                          id=\"name\"\n                          placeholder=\"John Doe\"\n                          value={formData.name}\n                          onChange={(e) =>\n                            updateFormData(\"name\", e.target.value)\n                          }\n                          className=\"transition-all duration-300 focus:ring-2 focus:ring-primary/20 focus:border-primary\"\n                        />\n                      </motion.div>\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label htmlFor=\"email\">Email Address</Label>\n                        <Input\n                          id=\"email\"\n                          type=\"email\"\n                          placeholder=\"john@example.com\"\n                          value={formData.email}\n                          onChange={(e) =>\n                            updateFormData(\"email\", e.target.value)\n                          }\n                          className=\"transition-all duration-300 focus:ring-2 focus:ring-primary/20 focus:border-primary\"\n                        />\n                      </motion.div>\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label htmlFor=\"company\">\n                          Company/Organization (Optional)\n                        </Label>\n                        <Input\n                          id=\"company\"\n                          placeholder=\"Your Company\"\n                          value={formData.company}\n                          onChange={(e) =>\n                            updateFormData(\"company\", e.target.value)\n                          }\n                          className=\"transition-all duration-300 focus:ring-2 focus:ring-primary/20 focus:border-primary\"\n                        />\n                      </motion.div>\n                    </CardContent>\n                  </>\n                )}\n\n                {/* Step 2: Professional Background */}\n                {currentStep === 1 && (\n                  <>\n                    <CardHeader>\n                      <CardTitle>Professional Background</CardTitle>\n                      <CardDescription>\n                        Tell us about your professional experience\n                      </CardDescription>\n                    </CardHeader>\n                    <CardContent className=\"space-y-4\">\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label htmlFor=\"profession\">\n                          What&apos;s your profession?\n                        </Label>\n                        <Input\n                          id=\"profession\"\n                          placeholder=\"e.g. Designer, Developer, Marketer\"\n                          value={formData.profession}\n                          onChange={(e) =>\n                            updateFormData(\"profession\", e.target.value)\n                          }\n                          className=\"transition-all duration-300 focus:ring-2 focus:ring-primary/20 focus:border-primary\"\n                        />\n                      </motion.div>\n\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label htmlFor=\"industry\">\n                          What industry do you work in?\n                        </Label>\n                        <Select\n                          value={formData.industry}\n                          onValueChange={(value) =>\n                            updateFormData(\"industry\", value)\n                          }\n                        >\n                          <SelectTrigger\n                            id=\"industry\"\n                            className=\"transition-all duration-300 focus:ring-2 focus:ring-primary/20 focus:border-primary\"\n                          >\n                            <SelectValue placeholder=\"Select an industry\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"technology\">\n                              Technology\n                            </SelectItem>\n                            <SelectItem value=\"healthcare\">\n                              Healthcare\n                            </SelectItem>\n                            <SelectItem value=\"education\">Education</SelectItem>\n                            <SelectItem value=\"finance\">Finance</SelectItem>\n                            <SelectItem value=\"retail\">Retail</SelectItem>\n                            <SelectItem value=\"creative\">\n                              Creative Arts\n                            </SelectItem>\n                            <SelectItem value=\"other\">Other</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </motion.div>\n                    </CardContent>\n                  </>\n                )}\n\n                {/* Step 3: Website Goals */}\n                {currentStep === 2 && (\n                  <>\n                    <CardHeader>\n                      <CardTitle>Website Goals</CardTitle>\n                      <CardDescription>\n                        What are you trying to achieve with your website?\n                      </CardDescription>\n                    </CardHeader>\n                    <CardContent className=\"space-y-4\">\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label>\n                          What&apos;s the primary goal of your website?\n                        </Label>\n                        <RadioGroup\n                          value={formData.primaryGoal}\n                          onValueChange={(value) =>\n                            updateFormData(\"primaryGoal\", value)\n                          }\n                          className=\"space-y-2\"\n                        >\n                          {[\n                            {\n                              value: \"showcase\",\n                              label: \"Showcase portfolio/work\",\n                            },\n                            { value: \"sell\", label: \"Sell products/services\" },\n                            {\n                              value: \"generate-leads\",\n                              label: \"Generate leads/inquiries\",\n                            },\n                            {\n                              value: \"provide-info\",\n                              label: \"Provide information\",\n                            },\n                            { value: \"blog\", label: \"Blog/content publishing\" },\n                          ].map((goal, index) => (\n                            <motion.div\n                              key={goal.value}\n                              className=\"flex items-center space-x-2 rounded-md border p-3 cursor-pointer hover:bg-accent transition-colors\"\n                              whileHover={{ scale: 1.02 }}\n                              whileTap={{ scale: 0.98 }}\n                              transition={{ duration: 0.2 }}\n                              initial={{ opacity: 0, x: -10 }}\n                              animate={{\n                                opacity: 1,\n                                x: 0,\n                                transition: {\n                                  delay: 0.1 * index,\n                                  duration: 0.3,\n                                },\n                              }}\n                            >\n                              <RadioGroupItem\n                                value={goal.value}\n                                id={`goal-${index + 1}`}\n                              />\n                              <Label\n                                htmlFor={`goal-${index + 1}`}\n                                className=\"cursor-pointer w-full\"\n                              >\n                                {goal.label}\n                              </Label>\n                            </motion.div>\n                          ))}\n                        </RadioGroup>\n                      </motion.div>\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label htmlFor=\"targetAudience\">\n                          Who is your target audience?\n                        </Label>\n                        <Textarea\n                          id=\"targetAudience\"\n                          placeholder=\"Describe your ideal visitors/customers\"\n                          value={formData.targetAudience}\n                          onChange={(e) =>\n                            updateFormData(\"targetAudience\", e.target.value)\n                          }\n                          className=\"min-h-[80px] transition-all duration-300 focus:ring-2 focus:ring-primary/20 focus:border-primary\"\n                        />\n                      </motion.div>\n                    </CardContent>\n                  </>\n                )}\n\n                {/* Step 4: Design Preferences */}\n                {currentStep === 3 && (\n                  <>\n                    <CardHeader>\n                      <CardTitle>Design Preferences</CardTitle>\n                      <CardDescription>\n                        Tell us about your aesthetic preferences\n                      </CardDescription>\n                    </CardHeader>\n                    <CardContent className=\"space-y-4\">\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label>\n                          What style do you prefer for your website?\n                        </Label>\n                        <RadioGroup\n                          value={formData.stylePreference}\n                          onValueChange={(value) =>\n                            updateFormData(\"stylePreference\", value)\n                          }\n                          className=\"space-y-2\"\n                        >\n                          {[\n                            { value: \"modern\", label: \"Modern & Sleek\" },\n                            { value: \"minimalist\", label: \"Minimalist\" },\n                            { value: \"bold\", label: \"Bold & Creative\" },\n                            {\n                              value: \"corporate\",\n                              label: \"Corporate & Professional\",\n                            },\n                          ].map((style, index) => (\n                            <motion.div\n                              key={style.value}\n                              className=\"flex items-center space-x-2 rounded-md border p-3 cursor-pointer hover:bg-accent transition-colors\"\n                              whileHover={{ scale: 1.02 }}\n                              whileTap={{ scale: 0.98 }}\n                              transition={{ duration: 0.2 }}\n                              initial={{ opacity: 0, y: 10 }}\n                              animate={{\n                                opacity: 1,\n                                y: 0,\n                                transition: {\n                                  delay: 0.1 * index,\n                                  duration: 0.3,\n                                },\n                              }}\n                            >\n                              <RadioGroupItem\n                                value={style.value}\n                                id={`style-${index + 1}`}\n                              />\n                              <Label\n                                htmlFor={`style-${index + 1}`}\n                                className=\"cursor-pointer w-full\"\n                              >\n                                {style.label}\n                              </Label>\n                            </motion.div>\n                          ))}\n                        </RadioGroup>\n                      </motion.div>\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label htmlFor=\"inspirations\">\n                          Any websites you like for inspiration?\n                        </Label>\n                        <Textarea\n                          id=\"inspirations\"\n                          placeholder=\"List websites you admire or want to emulate\"\n                          value={formData.inspirations}\n                          onChange={(e) =>\n                            updateFormData(\"inspirations\", e.target.value)\n                          }\n                          className=\"min-h-[80px] transition-all duration-300 focus:ring-2 focus:ring-primary/20 focus:border-primary\"\n                        />\n                      </motion.div>\n                    </CardContent>\n                  </>\n                )}\n\n                {/* Step 5: Budget & Timeline */}\n                {currentStep === 4 && (\n                  <>\n                    <CardHeader>\n                      <CardTitle>Budget & Timeline</CardTitle>\n                      <CardDescription>\n                        Let&apos;s talk about your investment and timeline\n                      </CardDescription>\n                    </CardHeader>\n                    <CardContent className=\"space-y-4\">\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label htmlFor=\"budget\">\n                          What&apos;s your budget range? (USD)\n                        </Label>\n                        <Select\n                          value={formData.budget}\n                          onValueChange={(value) =>\n                            updateFormData(\"budget\", value)\n                          }\n                        >\n                          <SelectTrigger\n                            id=\"budget\"\n                            className=\"transition-all duration-300 focus:ring-2 focus:ring-primary/20 focus:border-primary\"\n                          >\n                            <SelectValue placeholder=\"Select your budget\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"under-1000\">\n                              Under $1,000\n                            </SelectItem>\n                            <SelectItem value=\"1000-3000\">\n                              $1,000 - $3,000\n                            </SelectItem>\n                            <SelectItem value=\"3000-5000\">\n                              $3,000 - $5,000\n                            </SelectItem>\n                            <SelectItem value=\"5000-10000\">\n                              $5,000 - $10,000\n                            </SelectItem>\n                            <SelectItem value=\"over-10000\">\n                              Over $10,000\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </motion.div>\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label>What&apos;s your expected timeline?</Label>\n                        <RadioGroup\n                          value={formData.timeline}\n                          onValueChange={(value) =>\n                            updateFormData(\"timeline\", value)\n                          }\n                          className=\"space-y-2\"\n                        >\n                          {[\n                            { value: \"asap\", label: \"ASAP\" },\n                            { value: \"1-month\", label: \"Within 1 month\" },\n                            { value: \"3-months\", label: \"1-3 months\" },\n                            { value: \"flexible\", label: \"Flexible\" },\n                          ].map((time, index) => (\n                            <motion.div\n                              key={time.value}\n                              className=\"flex items-center space-x-2 rounded-md border p-3 cursor-pointer hover:bg-accent transition-colors\"\n                              whileHover={{ scale: 1.02 }}\n                              whileTap={{ scale: 0.98 }}\n                              transition={{ duration: 0.2 }}\n                              initial={{ opacity: 0, x: -10 }}\n                              animate={{\n                                opacity: 1,\n                                x: 0,\n                                transition: {\n                                  delay: 0.1 * index,\n                                  duration: 0.3,\n                                },\n                              }}\n                            >\n                              <RadioGroupItem\n                                value={time.value}\n                                id={`time-${index + 1}`}\n                              />\n                              <Label\n                                htmlFor={`time-${index + 1}`}\n                                className=\"cursor-pointer w-full\"\n                              >\n                                {time.label}\n                              </Label>\n                            </motion.div>\n                          ))}\n                        </RadioGroup>\n                      </motion.div>\n                    </CardContent>\n                  </>\n                )}\n\n                {/* Step 6: Additional Requirements */}\n                {currentStep === 5 && (\n                  <>\n                    <CardHeader>\n                      <CardTitle>Additional Requirements</CardTitle>\n                      <CardDescription>\n                        Any other specific needs for your website?\n                      </CardDescription>\n                    </CardHeader>\n                    <CardContent className=\"space-y-4\">\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label>Which features do you need?</Label>\n                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n                          {[\n                            \"Contact Form\",\n                            \"Blog/News\",\n                            \"E-commerce\",\n                            \"User Accounts\",\n                            \"Search Functionality\",\n                            \"Social Media Integration\",\n                            \"Newsletter Signup\",\n                            \"Analytics\",\n                          ].map((feature, index) => (\n                            <motion.div\n                              key={feature}\n                              className=\"flex items-center space-x-2 rounded-md border p-3 cursor-pointer hover:bg-accent transition-colors\"\n                              whileHover={{ scale: 1.02 }}\n                              whileTap={{ scale: 0.98 }}\n                              transition={{ duration: 0.2 }}\n                              initial={{ opacity: 0, y: 10 }}\n                              animate={{\n                                opacity: 1,\n                                y: 0,\n                                transition: {\n                                  delay: 0.05 * index,\n                                  duration: 0.3,\n                                },\n                              }}\n                              onClick={() =>\n                                toggleFeature(feature.toLowerCase())\n                              }\n                            >\n                              <Checkbox\n                                id={`feature-${feature}`}\n                                checked={formData.features.includes(\n                                  feature.toLowerCase(),\n                                )}\n                                onCheckedChange={() =>\n                                  toggleFeature(feature.toLowerCase())\n                                }\n                              />\n                              <Label\n                                htmlFor={`feature-${feature}`}\n                                className=\"cursor-pointer w-full\"\n                              >\n                                {feature}\n                              </Label>\n                            </motion.div>\n                          ))}\n                        </div>\n                      </motion.div>\n                      <motion.div variants={fadeInUp} className=\"space-y-2\">\n                        <Label htmlFor=\"additionalInfo\">\n                          Anything else we should know?\n                        </Label>\n                        <Textarea\n                          id=\"additionalInfo\"\n                          placeholder=\"Any additional requirements or information\"\n                          value={formData.additionalInfo}\n                          onChange={(e) =>\n                            updateFormData(\"additionalInfo\", e.target.value)\n                          }\n                          className=\"min-h-[80px] transition-all duration-300 focus:ring-2 focus:ring-primary/20 focus:border-primary\"\n                        />\n                      </motion.div>\n                    </CardContent>\n                  </>\n                )}\n              </motion.div>\n            </AnimatePresence>\n\n            <CardFooter className=\"flex justify-between pt-6 pb-4\">\n              <motion.div\n                whileHover={{ scale: 1.05 }}\n                whileTap={{ scale: 0.95 }}\n              >\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  onClick={prevStep}\n                  disabled={currentStep === 0}\n                  className=\"flex items-center gap-1 transition-all duration-300 rounded-2xl\"\n                >\n                  <ChevronLeft className=\"h-4 w-4\" /> Back\n                </Button>\n              </motion.div>\n              <motion.div\n                whileHover={{ scale: 1.05 }}\n                whileTap={{ scale: 0.95 }}\n              >\n                <Button\n                  type=\"button\"\n                  onClick={\n                    currentStep === steps.length - 1 ? handleSubmit : nextStep\n                  }\n                  disabled={!isStepValid() || isSubmitting}\n                  className={cn(\n                    \"flex items-center gap-1 transition-all duration-300 rounded-2xl\",\n                    currentStep === steps.length - 1 ? \"\" : \"\",\n                  )}\n                >\n                  {isSubmitting ? (\n                    <>\n                      <Loader2 className=\"h-4 w-4 animate-spin\" /> Submitting...\n                    </>\n                  ) : (\n                    <>\n                      {currentStep === steps.length - 1 ? \"Submit\" : \"Next\"}\n                      {currentStep === steps.length - 1 ? (\n                        <Check className=\"h-4 w-4\" />\n                      ) : (\n                        <ChevronRight className=\"h-4 w-4\" />\n                      )}\n                    </>\n                  )}\n                </Button>\n              </motion.div>\n            </CardFooter>\n          </div>\n        </Card>\n      </motion.div>\n\n      {/* Step indicator */}\n      <motion.div\n        className=\"mt-4 text-center text-sm text-muted-foreground\"\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={{ duration: 0.5, delay: 0.4 }}\n      >\n        Step {currentStep + 1} of {steps.length}: {steps[currentStep].title}\n      </motion.div>\n    </div>\n  );\n};\n\nexport default OnboardingForm;\n",
      "type": "registry:component",
      "target": "components/spectrumui/multistepformdemo.tsx"
    }
  ],
  "type": "registry:component"
}