Cta Pro 3: spotlight panelPRO
A dark panel with a light that follows the pointer, a faint grid, two buttons and reassurances. Touch and keyboard users get a steady glow.
Installation
Once per project: add the Pro registry and your licence key.
components.json{ "registries": { "@ballmac": "https://ui.ballmac.com/r/{name}.json", "@ballmac-pro": { "url": "https://ui.ballmac.com/r/pro/{name}.json", "headers": { "Authorization": "Bearer ${BALLMAC_LICENSE_KEY}" } } } }.env.localBALLMAC_LICENSE_KEY=your-licence-keyAdd it.
$ pnpm dlx shadcn@latest add @ballmac-pro/cta-pro-3Need a licence or help with setup?
Usage
import { CtaPro3 } from "@/components/ballmac/blocks/cta-pro-3/cta-pro-3"Dependencies
- npm
- lucide-react
- Registry
- @ballmac/buttonshadcn/utils
Use with AI
Inverted panel with a pointer-follow glow. Colours come from tokens so every theme works. With the shadcn MCP server set up (guide), ask your agent:
Add the Ballmac UI Cta Pro 3: spotlight panel (@ballmac-pro/cta-pro-3) to this project with the shadcn MCP, then use it where it fits.
Use it for
- Bold close to a marketing page
Not for
- Light, quiet pages
Registry JSON (needs your licence key): https://ui.ballmac.com/r/pro/cta-pro-3.json
Covered by the Ballmac UI Pro license.
More call to action blocks
CTA 1: framed call to action
A closing call-to-action panel: large heading, one line of reassurance and two buttons, over a softly lit animated grid.
CTA 2: waitlist over light beams
A waitlist or newsletter signup over rising light beams: heading, email field with validation, loading, success and error states.
CTA 3: install command
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.
Cta Pro 1: newsletter sign-up
A calm card with a validated email form, busy and error states, a success message that takes focus and a row of avatars with a reader count.