{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"application-page-headings-with-steps","type":"registry:block","title":"With Steps","files":[{"path":"components/blocks/application/page-headings/with-steps.tsx","content":"import { Check, ChevronRight } from 'lucide-react';\n\nexport default function PageHeadingWithSteps() {\n  return (\n    <div className=\"border-b\">\n      <div className=\"container mx-auto px-4 py-16 md:px-6 2xl:max-w-[1400px]\">\n        <div className=\"flex flex-col items-center text-center\">\n          <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n            Complete Your Profile\n          </h1>\n          <p className=\"text-muted-foreground mt-4 max-w-2xl text-xl\">\n            Let&apos;s get your account set up. Follow these steps to get\n            started with our platform.\n          </p>\n        </div>\n\n        <div className=\"mt-8 flex justify-center\">\n          <nav className=\"flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-2\">\n            <div className=\"flex items-center\">\n              <div className=\"bg-primary text-primary-foreground flex h-8 w-8 items-center justify-center rounded-full\">\n                <Check className=\"h-4 w-4\" />\n              </div>\n              <a href=\"#\" className=\"ml-3 text-sm font-medium\">\n                Account\n              </a>\n              <ChevronRight className=\"text-muted-foreground ml-3 hidden h-4 w-4 sm:block\" />\n            </div>\n\n            <div className=\"flex items-center\">\n              <div className=\"bg-primary text-primary-foreground flex h-8 w-8 items-center justify-center rounded-full\">\n                <span>2</span>\n              </div>\n              <a href=\"#\" className=\"ml-3 text-sm font-medium\">\n                Business Details\n              </a>\n              <ChevronRight className=\"text-muted-foreground ml-3 hidden h-4 w-4 sm:block\" />\n            </div>\n\n            <div className=\"flex items-center\">\n              <div className=\"border-muted bg-background flex h-8 w-8 items-center justify-center rounded-full border\">\n                <span className=\"text-muted-foreground\">3</span>\n              </div>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground ml-3 text-sm font-medium\"\n              >\n                Verification\n              </a>\n            </div>\n          </nav>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/application/page-headings/with-steps.tsx"}],"description":"A page title with a numbered step indicator that shows progress. Use it across multi screen flows like onboarding, checkout, or a setup wizard.","dependencies":["lucide-react"]}