Vue cta blocks.

98 call-to-action sections for the end of a page or the end of a section: sign-up prompts, email capture, offers, countdowns, social proof, trust badges and product previews. The gallery sorts them into 14 groups, from Card in card to Pickers and toggles.

For email capture use Light Email Capture CTA or Centered Email Capture CTA, which adds a six-digit code step. For a slim line above the footer use Icon Banner CTA or Upsell Strip CTA. For urgency use Digit Countdown Banner, for proof Testimonial Quote CTA, and for pricing offers Price Savings CTA.

No. The words dark and light in a block name describe the design it was drawn in, and every block takes its colours from the site's theme tokens, so it follows light and dark mode with the rest of your page. Centered, split and compact describe the layout: a centred pitch, a pitch beside a visual, or one slim row.

Each file is one section: the headline and the buttons are plain markup, and any sample figures, links and lists sit as typed constants at the top. The main button is the Shine Button component from the registry, usually rendered as a link, so the call to action stays a normal anchor.

The main button is a link whose address is a # placeholder in most blocks. Set the href on the Shine Button's link to your sign-up, pricing or checkout address. A block with a menu of routes, such as the dual-action band, keeps each route's href in a ROUTES array at the top.

The capture blocks validate the address and then move to a done state inside the page, with no network call. In Light Email Capture CTA the subscribe handler checks the address against a pattern, sets the done step and does nothing else. Send the address to your mailing-list or sign-up endpoint in that handler, before you set the done state, and show a failure in the error line the block already keeps.

Centered Email Capture CTA fakes a short wait, sends no mail and accepts any six digits. Replace the two timers in its send and verify steps with your real calls: one that emails the code, and one that checks the code and moves on to the done step only when it passes.

Digit Countdown Banner counts down to the end of the current month in the visitor's time zone and shows how much of the month is left. Change the monthEnd function to return the real end of your offer, such as a fixed launch date, so every visitor sees the same deadline.

Dismissible Action Banner CTA collapses with Not now or Don't show again and leaves an Undo that takes focus, but it remembers nothing after a reload. Store the choice yourself, in a cookie or local storage, and render nothing on the next visit when it says hidden.

Every block lays out as rows between the page's side rails and stacks them on a phone, so it sits in a page as a section on its own. Put it last, just before the footer, or after a features or pricing section. The animated parts, such as the pulse in the starfield, switch off under reduced motion.

This page lists 98 of the category's 100 cta blocks for Vue. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Vue cta blocks are the React ones ported to Vue, on Ark UI's Vue primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-vue (/r/vue/cta-card-inset-announcement-badge.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Vue needs vue @ark-ui/vue lucide-vue-next installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-vue@latest add` with the block's registry URL, such as /r/vue/cta-card-inset-announcement-badge.json for Inset Announcement Badge CTA. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of cta block, led by product previews (12), slim bands (9), social proof (9) and forms and capture (8), and sort by popular or name. A good first look: Inset Announcement Badge CTA, Card Inset Benefits Stack CTA and Card Inset Big Metric Checklist CTA. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a cta block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the layouts, what it shows and conversion kinds.

Open its page and use the full-screen viewer (/view/cta/vue/card-inset-announcement-badge) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each cta block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the cta blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 cta blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a cta block, read it with get_block and install it on your Vue stack.

Pass `category: "cta"` to search_blocks to search only the 100 cta blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "cta", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.