{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog15",
  "title": "Alert dialog",
  "description": "Alert dialog built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/alert-dialog/15/index.tsx",
      "content": "\"use client\";\n\nimport { ArrowRightIcon } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\n\nexport default function Component() {\n  const [step, setStep] = useState(1);\n\n  const stepContent = [\n    {\n      description:\n        \"Discover a powerful collection of components designed to enhance your development workflow.\",\n      title: \"Welcome to shadcnuikit.com\",\n    },\n    {\n      description:\n        \"Each component is fully customizable and built with modern web standards in mind.\",\n      title: \"Customizable Components\",\n    },\n    {\n      description:\n        \"Begin building amazing interfaces with our comprehensive component library.\",\n      title: \"Ready to Start?\",\n    },\n    {\n      description:\n        \"Access our extensive documentation and community resources to make the most of shadcnuikit.com.\",\n      title: \"Get Support\",\n    },\n  ];\n\n  const totalSteps = stepContent.length;\n\n  const handleContinue = () => {\n    if (step < totalSteps) {\n      setStep(step + 1);\n    }\n  };\n\n  return (\n    <Dialog\n      onOpenChange={(open) => {\n        if (open) setStep(1);\n      }}\n    >\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Onboarding</Button>\n      </DialogTrigger>\n      <DialogContent className=\"gap-0 [&>button:last-child]:text-white\">\n        <DialogHeader>\n          <DialogTitle className=\"font-normal\">\n            {stepContent[step - 1].title}\n          </DialogTitle>\n          <DialogDescription>\n            {stepContent[step - 1].description}\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex flex-col justify-between gap-4 sm:flex-row sm:items-center\">\n          <div className=\"flex justify-center space-x-1.5 max-sm:order-1\">\n            {[...Array(totalSteps)].map((_, index) => (\n              <div\n                className={cn(\n                  \"bg-primary size-1.5 rounded-full\",\n                  index + 1 === step ? \"bg-primary\" : \"opacity-20\",\n                )}\n                key={String(index)}\n              />\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button type=\"button\" variant=\"ghost\">\n                Skip\n              </Button>\n            </DialogClose>\n            {step < totalSteps ? (\n              <Button onClick={handleContinue} type=\"button\">\n                Next\n                <ArrowRightIcon\n                  aria-hidden=\"true\"\n                  className=\"transition-transform\"\n                />\n              </Button>\n            ) : (\n              <DialogClose asChild>\n                <Button type=\"button\">Okay</Button>\n              </DialogClose>\n            )}\n          </DialogFooter>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/alert-dialog15.tsx"
    }
  ],
  "type": "registry:component"
}