{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-progress-7","type":"registry:block","title":"Multi-step progress indicator","description":"Multi-step progress indicator","dependencies":[],"registryDependencies":["progress"],"files":[{"path":"c-progress-7.tsx","type":"registry:block","content":"import { Progress } from \"@/components/ui/progress\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst steps = [\n  { label: \"Account\", completed: true },\n  { label: \"Profile\", completed: true },\n  { label: \"Preferences\", completed: false },\n  { label: \"Review\", completed: false },\n]\n\nexport function Pattern() {\n  const completedSteps = steps.filter((s) => s.completed).length\n  const progressValue = (completedSteps / steps.length) * 100\n\n  return (\n    <div className=\"mx-auto w-full max-w-xs space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm font-medium\">Setup Progress</span>\n        <span className=\"text-muted-foreground text-xs\">\n          {completedSteps} of {steps.length} steps\n        </span>\n      </div>\n      <Progress value={progressValue} />\n      <div className=\"flex flex-col gap-2\">\n        {steps.map((step) => (\n          <div key={step.label} className=\"flex items-center gap-2 text-sm\">\n            {step.completed ? (\n              <IconPlaceholder\n                lucide=\"CircleCheckIcon\"\n                tabler=\"IconCircleCheck\"\n                hugeicons=\"CheckmarkCircle01Icon\"\n                phosphor=\"CheckCircleIcon\"\n                remixicon=\"RiCheckboxCircleLine\"\n                className=\"text-success size-4\"\n                aria-hidden=\"true\"\n              />\n            ) : (\n              <IconPlaceholder\n                lucide=\"CircleIcon\"\n                tabler=\"IconCircle\"\n                hugeicons=\"CircleIcon\"\n                phosphor=\"CircleIcon\"\n                remixicon=\"RiCircleLine\"\n                className=\"text-muted-foreground size-4\"\n                aria-hidden=\"true\"\n              />\n            )}\n            <span\n              className={\n                step.completed ? \"text-foreground\" : \"text-muted-foreground\"\n              }\n            >\n              {step.label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}","target":"components/examples/c-progress-7.tsx"}],"meta":{"order":7}}