{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding9",
  "title": "Step Cards with Numbered Indicators",
  "description": "Animated step wizard with square numbered indicators and content cards for each step. Perfect for product walkthroughs that guide users through key features.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "registry/onboarding9/onboarding9.tsx",
      "content": "\"use client\";\n\nimport { ArrowLeft, ArrowRight, Check, type LucideIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Step {\n  id: string;\n  title: string;\n  description?: string;\n  icon?: LucideIcon;\n}\n\ninterface Onboarding9Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  steps?: Step[];\n  currentStep?: number;\n  labels?: {\n    next?: string;\n    back?: string;\n    finish?: string;\n  };\n  className?: string;\n}\n\nexport const onboarding9Demo: Onboarding9Props = {\n  badge: {\n    label: \"Quick Setup\",\n    variant: \"secondary\",\n  },\n  heading: \"Get started in minutes\",\n  steps: [\n    {\n      id: \"1\",\n      title: \"Welcome aboard!\",\n      description:\n        \"We're excited to have you here. Let's get your account set up in just a few simple steps.\",\n    },\n    {\n      id: \"2\",\n      title: \"Connect your tools\",\n      description:\n        \"Link your favorite apps and services to streamline your workflow and boost productivity.\",\n    },\n    {\n      id: \"3\",\n      title: \"Customize your space\",\n      description:\n        \"Personalize your dashboard and settings to match your preferences and work style.\",\n    },\n    {\n      id: \"4\",\n      title: \"You're all set!\",\n      description:\n        \"Congratulations! Your account is ready. Start exploring and make the most of your new workspace.\",\n    },\n  ],\n  currentStep: 0,\n  labels: {\n    next: \"Continue\",\n    back: \"Back\",\n    finish: \"Get Started\",\n  },\n};\n\nexport function Onboarding9({\n  badge,\n  heading,\n  steps = [],\n  currentStep: initialStep = 0,\n  labels = {},\n  className,\n}: Onboarding9Props) {\n  const [currentStep, setCurrentStep] = useState(initialStep);\n  const { next: nextLabel, back: backLabel, finish: finishLabel } = labels;\n\n  if (steps.length === 0) return null;\n\n  const currentStepData = steps[currentStep];\n  const isLastStep = currentStep === steps.length - 1;\n  const isFirstStep = currentStep === 0;\n\n  const handleNext = () => {\n    if (!isLastStep) {\n      setCurrentStep((prev) => prev + 1);\n    }\n  };\n\n  const handleBack = () => {\n    if (!isFirstStep) {\n      setCurrentStep((prev) => prev - 1);\n    }\n  };\n\n  const handleFinish = () => {\n    console.log(\"Onboarding completed!\");\n  };\n\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-2xl px-4 md:px-6\">\n        {/* Header */}\n        <div className=\"mb-8 text-center\">\n          {badge && (\n            <Badge variant={badge.variant ?? \"default\"} className=\"mb-4\">\n              {badge.label}\n            </Badge>\n          )}\n          {heading && <h2 className=\"text-2xl font-semibold md:text-4xl\">{heading}</h2>}\n        </div>\n\n        {/* Step indicators */}\n        <div className=\"mb-8 flex items-center justify-center gap-2\">\n          {steps.map((step, index) => {\n            const isCompleted = index < currentStep;\n            const isCurrent = index === currentStep;\n\n            return (\n              <div\n                key={step.id}\n                className={cn(\n                  \"flex size-10 items-center justify-center rounded-lg border-2 text-sm font-medium transition-all\",\n                  isCompleted && \"border-primary bg-primary text-primary-foreground\",\n                  isCurrent && \"scale-110 border-primary bg-background text-primary\",\n                  !isCompleted &&\n                    !isCurrent &&\n                    \"border-muted-foreground/30 bg-background text-muted-foreground\"\n                )}\n              >\n                {isCompleted ? <Check className=\"size-5\" /> : index + 1}\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Content */}\n        <div className=\"relative min-h-[200px] overflow-hidden rounded-lg border bg-card p-6 md:p-10\">\n          <div className=\"text-center\">\n            <h3 className=\"mb-4 text-xl font-semibold md:text-2xl\">{currentStepData?.title}</h3>\n            <p className=\"mx-auto max-w-md text-muted-foreground\">{currentStepData?.description}</p>\n          </div>\n        </div>\n\n        {/* Navigation */}\n        <div className=\"mt-8 flex justify-center gap-3\">\n          {!isFirstStep && (\n            <Button variant=\"outline\" size=\"lg\" onClick={handleBack}>\n              <ArrowLeft className=\"size-4\" />\n              {backLabel}\n            </Button>\n          )}\n          <Button size=\"lg\" onClick={isLastStep ? handleFinish : handleNext}>\n            {isLastStep ? (\n              <>\n                {finishLabel}\n                <Check className=\"size-4\" />\n              </>\n            ) : (\n              <>\n                {nextLabel}\n                <ArrowRight className=\"size-4\" />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/onboarding9.tsx"
    }
  ],
  "type": "registry:block"
}