{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "success-screen",
  "title": "Success screen",
  "description": "the one success template",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "@kit/spinner",
    "@kit/spot"
  ],
  "files": [
    {
      "path": "components/kit/success-screen.tsx",
      "content": "import { cn } from 'cn';\nimport { CheckIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport { Spinner } from '@/components/kit/spinner';\nimport { Spot } from '@/components/kit/spot';\n\ntype Props = {\n  title: string;\n  body?: string;\n  /** Big primary-coloured amount between title and body. */\n  amount?: string;\n  amountSubtitle?: string;\n  /** Spinner instead of the check; hides the text, for in-flight operations. */\n  loading?: boolean;\n  /** Extra content under the body (SummaryCard, buttons…). */\n  children?: React.ReactNode;\n  className?: string;\n};\n\n/** The one success template. Centred check, title, optional amount, body. Actions go under it (or in a StickyBottomBar). */\nexport function SuccessScreen({ title, body, amount, amountSubtitle, loading, children, className }: Props) {\n  return (\n    <div className={cn('flex flex-1 flex-col items-center justify-center px-6 py-12 text-center', className)}>\n      {loading ? (\n        <span className=\"bg-muted mb-7 flex size-24 items-center justify-center rounded-full\">\n          <Spinner size=\"large\" />\n        </span>\n      ) : (\n        <>\n          <Spot icon={CheckIcon} size=\"xl\" tone=\"success\" className=\"mb-7\" />\n          <div role=\"status\" className=\"flex w-full max-w-sm flex-col items-center gap-2\">\n            <h2 className=\"text-2xl font-semibold tracking-tight\">{title}</h2>\n            {amount ? <p className=\"text-primary text-4xl font-bold tabular-nums\">{amount}</p> : null}\n            {amountSubtitle ? <p className=\"text-muted-foreground\">{amountSubtitle}</p> : null}\n            {body ? <p className=\"text-muted-foreground\">{body}</p> : null}\n          </div>\n          {children ? <div className=\"mt-6 w-full max-w-sm\">{children}</div> : null}\n        </>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/success-screen.tsx"
    }
  ],
  "meta": {
    "exports": [
      "SuccessScreen"
    ],
    "api": "<SuccessScreen title body? amount? amountSubtitle? loading?>{extra}</SuccessScreen>"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "feedback"
  ],
  "type": "registry:component"
}