{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-3",
  "title": "CTA 3: install command",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A closing call-to-action for developer products: heading, two buttons and a copyable install command with package-manager tabs, over a soft dotted glow.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/button.json",
    "https://ui.ballmac.com/r/install-tabs.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/cta-3/cta-3.tsx",
      "content": "// Ballmac UI: CTA 3. https://ui.ballmac.com/blocks/cta-3\nimport * as React from \"react\"\nimport { ArrowRight, Check } from \"lucide-react\"\n\nimport { buttonVariants } from \"@/components/ballmac/button\"\nimport { InstallTabs } from \"@/components/ballmac/install-tabs\"\nimport { cn } from \"@/lib/utils\"\n\ntype Action = { label: string; href: string }\n\ntype Cta3Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Heading. */\n  title?: string\n  /** One or two sentences under the heading. */\n  description?: string\n  /** Command run through each package manager's runner, e.g. \"create-acme@latest my-app\". */\n  command?: string\n  /** Explicit command per package manager; overrides `command`. */\n  commands?: React.ComponentProps<typeof InstallTabs>[\"commands\"]\n  /** Remember the visitor's package manager across installs on the page and site. */\n  storageKey?: string\n  /** Main button. */\n  primaryAction?: Action\n  /** Quiet button. */\n  secondaryAction?: Action\n  /** Short facts under the command. */\n  notes?: string[]\n}\n\nfunction Cta3({\n  title = \"Start building in under a minute.\",\n  description = \"One command scaffolds a working app with auth, a database and your first deploy already wired up.\",\n  command = \"create-acme@latest my-app\",\n  commands,\n  storageKey,\n  primaryAction = { label: \"Read the docs\", href: \"#\" },\n  secondaryAction = { label: \"View on GitHub\", href: \"#\" },\n  notes = [\"MIT licensed\", \"Works with Next.js, Remix and Vite\", \"No account needed\"],\n  className,\n  ...props\n}: Cta3Props) {\n  return (\n    <section data-slot=\"cta-3\" className={cn(\"mx-auto max-w-6xl px-4 py-20 sm:px-6 md:py-28\", className)} {...props}>\n      <div className=\"bg-card relative isolate overflow-hidden rounded-[2rem] border\">\n        <div aria-hidden=\"true\" className=\"absolute inset-0 -z-10\">\n          <div className=\"absolute inset-0 bg-[radial-gradient(color-mix(in_oklch,var(--foreground)_16%,transparent)_1px,transparent_1px)] [background-size:20px_20px] [mask-image:radial-gradient(60%_90%_at_85%_20%,black,transparent)]\" />\n          <div className=\"bg-chart-1/20 absolute -top-32 -end-20 size-[26rem] rounded-full blur-[110px]\" />\n          <div className=\"bg-chart-5/15 absolute -bottom-40 start-0 size-[22rem] rounded-full blur-[110px]\" />\n        </div>\n        <div className=\"grid items-center gap-10 p-8 sm:p-12 lg:grid-cols-[1.05fr_1fr] lg:gap-14 lg:p-16\">\n          <div>\n            <h2 className=\"text-3xl font-semibold tracking-[-0.035em] text-balance sm:text-4xl lg:text-5xl\">{title}</h2>\n            <p className=\"text-muted-foreground mt-4 max-w-lg text-lg text-pretty\">{description}</p>\n            <div className=\"mt-8 flex flex-wrap gap-3\">\n              <a className={buttonVariants({ size: \"lg\", shape: \"pill\" })} href={primaryAction.href}>\n                {primaryAction.label} <ArrowRight  className=\"rtl:rotate-180\"/>\n              </a>\n              <a className={buttonVariants({ variant: \"outline\", size: \"lg\", shape: \"pill\" })} href={secondaryAction.href}>{secondaryAction.label}</a>\n            </div>\n          </div>\n          <div>\n            <InstallTabs command={command} commands={commands} storageKey={storageKey} className=\"shadow-[0_30px_70px_-35px_rgb(0_0_0/0.4)]\" />\n            <ul className=\"text-muted-foreground mt-5 flex flex-wrap gap-x-5 gap-y-2 text-sm\">\n              {notes.map((n) => (\n                <li key={n} className=\"flex items-center gap-1.5\">\n                  <Check className=\"text-chart-2 size-4\" aria-hidden=\"true\" />\n                  {n}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { Cta3, type Cta3Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/cta-3/cta-3.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "cta",
      "install",
      "command",
      "developer",
      "copy",
      "package manager"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "The last section of a developer landing page. Set command (run through npm, pnpm, yarn and bun) or commands for explicit per-manager strings.",
      "whenToUse": [
        "Libraries, CLIs and APIs",
        "Docs landing pages"
      ],
      "whenNotToUse": [
        "Consumer products without a command line"
      ],
      "composesWith": [
        "hero-2",
        "features-6",
        "faq-2",
        "footer-2"
      ],
      "a11y": [
        {
          "keys": "Arrow Left / Right",
          "action": "Switches package manager; the copy button announces success"
        }
      ],
      "customization": [
        "command or commands for the install tabs",
        "storageKey: remember the package manager",
        "notes: short facts under the command"
      ]
    },
    "examples": [
      "cta-3-demo",
      "cta-3-custom"
    ],
    "url": "https://ui.ballmac.com/components/cta-3"
  },
  "categories": [
    "blocks",
    "cta"
  ],
  "type": "registry:block"
}