{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-motion",
  "type": "registry:component",
  "title": "Onboarding motion",
  "description": "An animated onboarding card with a clickable segmented step bar, content that slides between steps, back and continue buttons, and a final CTA.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/magnetic-cta.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/onboarding-motion.tsx",
      "type": "registry:ui",
      "target": "components/ui/onboarding-motion.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { MagneticCta } from \"@/components/ui/magnetic-cta\"\n\nconst steps = [\n  {\n    title: \"Install the free kit\",\n    body: \"Pick a template. Tokens, type and spacing are already decided.\",\n  },\n  {\n    title: \"Compose product UI\",\n    body: \"Dashboards, AI studio, billing, admin. Stay free as long as you want.\",\n  },\n  {\n    title: \"Invite your team\",\n    body: \"Kinetic heroes and launch kits when the first screen has to convert.\",\n  },\n]\n\nfunction OnboardingMotion({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const [step, setStep] = React.useState(0)\n  const s = steps[step]\n  return (\n    <div\n      data-slot=\"onboarding-motion\"\n      data-tier=\"premium\"\n      className={cn(\"mx-auto w-full max-w-lg overflow-hidden rounded-2xl border border-border bg-surface\", className)}\n    >\n      <div className=\"flex gap-1 border-b border-border bg-sunken p-3\">\n        {steps.map((_, i) => (\n          <button\n            key={i}\n            type=\"button\"\n            aria-label={`Step ${i + 1}`}\n            aria-current={i === step ? \"step\" : undefined}\n            onClick={() => setStep(i)}\n            className={cn(\n              \"h-1 flex-1 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-accent\",\n              i <= step ? \"bg-accent\" : \"bg-border\"\n            )}\n          />\n        ))}\n      </div>\n      <div className=\"relative min-h-[220px] p-6\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={step}\n            initial={reduce ? false : { x: 16 }}\n            animate={{ x: 0 }}\n            exit={reduce ? undefined : { x: -16 }}\n            transition={{ duration: 0.28 }}\n            className=\"space-y-3\"\n          >\n            <p className=\"text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\">\n              Step {step + 1} of {steps.length}\n            </p>\n            <h3 className=\"text-2xl font-medium tracking-[-0.018em] text-fg\">{s.title}</h3>\n            <p className=\"text-sm leading-[1.55] text-fg-muted\">{s.body}</p>\n          </motion.div>\n        </AnimatePresence>\n      </div>\n      <div className=\"flex items-center justify-between gap-3 border-t border-border px-6 py-4\">\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" disabled={step === 0} onClick={() => setStep((x) => Math.max(0, x - 1))}>\n          Back\n        </Button>\n        {step < steps.length - 1 ? (\n          <Button type=\"button\" size=\"sm\" onClick={() => setStep((x) => Math.min(steps.length - 1, x + 1))}>\n            Continue\n          </Button>\n        ) : (\n          <MagneticCta size=\"sm\">Open gallery</MagneticCta>\n        )}\n      </div>\n    </div>\n  )\n}\nexport { OnboardingMotion }\n"
    }
  ]
}