For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
When to use
- A closing get started band with a headline and 1 or 2 actions, some backed by logos, avatars or a rating
- Email capture for a newsletter, a waitlist or release updates, with an inline email field and submit button
- A sales prompt that books a call or opens a contact route rather than a self-serve signup
When not to use
- The first screen of a page, with the main headline and a product console above the fold: use the Hero blocks
- A compact promo tile with 1 button, sized to sit beside other cards in an app page: use the Card blocks
- A sign in or sign up page with a password, a magic link or social provider buttons: use the Auth blocks
Agent notes
- The headline and every action label are written inline in
Ctain components/cta.tsx, never in a data file; rewrite them there - No action is wired: every
hrefis a placeholder hash and no email form reaches a backend; connect real routes and a submit handler
Third-party API docs
- Motion v12: API reference, docs, used by 2 of 17 blocks (the docs follow the latest Motion, with no React API break since v12)
Markdown
https://web.dev.reui.io/blocks/marketing/cta.mdMCP
search({ query: "cta", type: "block", category: "cta" })Shadcn CTA Blocks: Call to Action Sections That Close a Page
A call to action section is a promise and a button, and the variations are about what sits beside the button: an avatar row, a proof grid, a logo marquee, a checklist, a rating, a form field, a secondary link. These blocks ship those variations with the spacing and contrast done so the section reads as the close of the page rather than another card.
The set runs from centered sections and split layouts to full-width banners. 11 of the 17 are banners: 4 turn a photograph of Earth or Mars on a WebGL canvas, 1 cuts a tower photo out with an SVG mask, 1 floats 11 extruded logo tiles over an isometric grid, and the rest sit on gradients, a neon line stream, dot grids and corner glows. Of the 2 split layouts, 1 pairs its copy with an image panel and 1 stands an analytics console drawn in markup beside it.
All CTA Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Newsletter CTA Centered newsletter signup CTA with mail-prefixed email input and avatar-stack subscriber proof
- Feature Strip CTA Split CTA card with image media panel, badge eyebrow, dual link buttons, and feature trust strip
- Work Email CTA Centered Frame CTA with animated grid background, badge eyebrow, and single email capture form
- Proof Grid CTA Centered marketing CTA with badge eyebrow, framed three-column proof grid, and dual link buttons
- Headline Only CTA Full-width aurora-gradient CTA banner with a two-line headline and one rounded-full pill button
- Final Conversion CTA Dark violet CTA banner with animated neon sine-wave line-stream backdrop and one rounded-full button
- Agency Booking CTA Animated analytics dashboard mockup on a gradient mesh beside CTA copy and a scrolling logo marquee
- Footer Docs CTA Night Earth CTA banner with WebGL city lights turning on the globe beside light and outline buttons
- Space Launch CTA Frosted glass CTA panel over a star field with an orange sun and a turning night Earth
- Tool Handoff CTA Figma and Cursor brand-button CTA centered under a pill eyebrow badge and a 9-avatar builder stack
- Customer Logos CTA Masked tower photo cutout bleeding off an emerald CTA banner with a looping wordmark marquee
- Proof Points CTA Rotating Mars CTA banner on dotted indigo with paired buttons and 3 pulsing proof checks
- MCP Integrations CTA MCP integrations CTA banner with 11 floating extruded logo tiles on an isometric grid floor
- Release Updates Signup Dark newsletter signup banner with inline email join form and a rotating WebGL night Earth
- Outcome Checklist CTA Outcome checklist CTA banner on emerald with 4 checked items, an amber action and lime corner glows
- Sales Contact CTA Sales contact CTA banner with the headline left and Contact Us and Book a Call buttons right
- Review Rating CTA Star rating review pill CTA on a dark dot-grain banner with a centered brand logo tile
What the CTA blocks cover
Marketing sections, each a full block with sample copy:
- Centered newsletter signup CTA with mail-prefixed email input and avatar-stack subscriber proof
- Split CTA card with image media panel, badge eyebrow, dual link buttons, and feature trust strip
- Centered Frame CTA with animated grid background, badge eyebrow, and single email capture form
- Centered marketing CTA with badge eyebrow, framed three-column proof grid, and dual link buttons
- Full-width aurora-gradient CTA banner with a two-line headline and one rounded-full pill button
- Dark violet CTA banner with animated neon sine-wave line-stream backdrop and one rounded-full button
- Animated analytics dashboard mockup on a gradient mesh beside CTA copy and a scrolling logo marquee
- Night Earth CTA banner with WebGL city lights turning on the globe beside light and outline buttons
- Frosted glass CTA panel over a star field with an orange sun and a turning night Earth
- Figma and Cursor brand-button CTA centered under a pill eyebrow badge and a 9-avatar builder stack
- Masked tower photo cutout bleeding off an emerald CTA banner with a looping wordmark marquee
- Rotating Mars CTA banner on dotted indigo with paired buttons and 3 pulsing proof checks
- MCP integrations CTA banner with 11 floating extruded logo tiles on an isometric grid floor
- Dark newsletter signup banner with inline email join form and a rotating WebGL night Earth
- Outcome checklist CTA banner on emerald with 4 checked items, an amber action and lime corner glows
- Sales contact CTA banner with the headline left and Contact Us and Book a Call buttons right
- Star rating review pill CTA on a dark dot-grain banner with a centered brand logo tile
What Sits Beside the Button
- Planets turned in WebGL 4 banners carry a photograph of Earth or Mars and turn its surface on a WebGL canvas, 1 turn every 90 seconds. The still photo is the resting frame under reduced motion or without WebGL, and the loop pauses off screen and in a hidden tab.
- Product art drawn in code A split layout stands an analytics console drawn in markup on a gradient mesh, with KPI cards, a revenue chart and an order Table with Progress bars. A banner draws 11 extruded integration tiles over an isometric grid floor and floats them with motion/react.
- Proof rows Avatar stacks of 5 and 9 faces, a 3-column Frame proof grid, 2 marquees of 8 wordmarks that pause on hover, a 4 wordmark trust row, 3 pulsing proof checks, a 4 item outcome checklist and a Rating pill with a review count.
- Email capture 3 blocks carry an email form: a mail-prefixed Input Group, a plain Input with a submit button on a Frame, and an @-prefixed field whose confirmation swaps in through an aria-live region.
Built from
- shadcn/ui components Button, Card, Item, Avatar, Input Group, Input, Separator, Table, Progress, Kbd, the same components your project already owns.
- ReUI primitives Badge eyebrows, Frame panels, IconTile icon plates and a Rating score, the free primitives these Pro blocks build on.
- Both twins, every style Each block ships on Base UI and on Radix, in 8 design styles, and names every part it composes on its page.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Can the CTA track clicks?
The button is a plain link or button; attach your analytics handler to it like any other, the blocks do not include a tracker.
Why do some CTA banners stay dark in a light theme?
They are dark surfaces on purpose. 8 put the dark class on the banner, so button, ring and border tokens resolve to dark values whatever the host theme is, and 3 paint fixed oklch colors instead of tokens. The other 6 run on your theme tokens, though the analytics split keeps its pastel gradient mesh in both themes.
How do I install a CTA block?
Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.
Is a license needed?
CTA blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.