{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-banner",
  "type": "registry:ui",
  "title": "Cta banner",
  "description": "Tailwind call to action banner with a heading, supporting text and a primary button that stacks on mobile and sits in a row on wider screens.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/cta-banner.tsx",
      "type": "registry:ui",
      "target": "components/ui/cta-banner.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction CtaBanner({\n  title,\n  description,\n  action,\n  className,\n}: {\n  title: string\n  description?: string\n  action?: { label: string; onClick?: () => void }\n  className?: string\n}) {\n  return (\n    <div\n      data-slot=\"cta-banner\"\n      className={cn(\n        \"flex flex-col items-start justify-between gap-4 rounded-xl border border-border bg-sunken p-6 sm:flex-row sm:items-center\",\n        className\n      )}\n    >\n      <div>\n        <h3 className=\"text-base font-medium text-fg\">{title}</h3>\n        {description ? <p className=\"mt-1 text-sm text-fg-muted\">{description}</p> : null}\n      </div>\n      {action ? <Button onClick={action.onClick}>{action.label}</Button> : null}\n    </div>\n  )\n}\nexport { CtaBanner }\n"
    }
  ]
}