CTA Banner
.mdLarge rounded call-to-action panel on a faded dot grid with a headline, two buttons and a soft volt spotlight that trails the cursor.
ctabannerspotlightdot gridlandingconversion
Installation
$npx shadcn@latest add @geturui/cta-banner
Also installs: Animated Badge, Button
Usage
usage.tsx
1import { CtaBanner } from "@/components/blocks/cta-banner";
2
3export default function Cta() {
4 return (
5 <CtaBanner
6 headline="Start building in minutes"
7 subcopy="Free for personal projects. No card needed."
8 primaryAction={{ label: "Create account", href: "/sign-up" }}
9 secondaryAction={{ label: "Book a demo", href: "/demo" }}
10 align="left"
11 />
12 );
13}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
headline | string | — | Large heading; blurs up into view. |
subcopy | string | — | Supporting line. |
eyebrow | string | null | "Free to start" | Pulsing badge above the headline. null hides it. |
primaryAction | { label; href?; onClick? } | — | Volt button with a nudging arrow. |
secondaryAction | { label; href?; onClick? } | null | — | Secondary button. null hides it. |
spotlight | boolean | true | Radial glow that follows the pointer. Static under reduced motion. |
align | "center" | "left" | "center" | Left puts the buttons on the right on wide containers. |
Accessibility
- The dot grid and spotlight are decorative and aria-hidden.
- Actions are real links or buttons with visible focus rings.