Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Icon Accent CTA Block for React

A band call to action with an accent icon in a hairline frame, a Shine Button and a docs link, and a closing band of three cells that fill in one by one when you press Deploy now.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A call to action that is a band across the page column, for React with Base UI. On the start side an accent icon sits in a hairline frame with + marks on its corners, beside a headline and one sentence about Skiff, a preview-deploy tool. On the end side a Shine Button reads "Deploy now" and an outline button links to the docs. Under a hairline, a closing band of three cells, Build, Test and Preview, shows what the button does: press it and each cell runs and then ticks done in turn, and the last one ends on the preview address. It's built from Shine Button, Button and Guides, with CSS for the entrance and the spinner, and your theme's tokens for every colour. For developer tools and deploy flows with one action that should be hard to miss.

FAQ

What does Deploy now do, and how do I wire it?

It's a button, not a link, because it acts on the page: it runs a pretend deploy through three steps of 450 ms (STEP_MS) and the Preview cell then shows an address. Nothing is sent anywhere; the timers and PREVIEW_URL are stand-ins. Replace deploy with your own call (a request to your API, or a router push to your sign-in page) and set the stage from its progress.

How do screen readers hear the result?

The cells are real text ("Build, Running"), and a polite status region that is always on the page says "Building your preview…" and then "Preview ready at…", so the change is announced without moving focus. The button keeps focus while it works and is never disabled. Pressing it while a deploy is running does nothing.

What moves, and what happens with reduced motion?

The entrance fades up once, and the running step shows a spinner. With reduced motion the entrance is off and the spinner stands still, so the state still reads from the word beside it.

Where does the docs link go?

It's a link (href="#"): point it at your documentation. It comes after the primary button both in the page and on screen, so keyboard and screen reader users meet the main action first. The docs Button renders the link it's given with render, with nativeButton={false}.

How do I change the icon?

Swap RocketIcon for any icon from your icon set. The frame is a muted square with Guides marks on its corners, so any icon sits in it without further styling, and it's hidden from screen readers because the headline says everything it does.

How does it fit on a phone?

The icon shrinks and sits beside the headline, the two buttons wrap onto separate lines under the text, and the three cells stack as rows. Everything mirrors in a right-to-left layout; the preview address keeps its left-to-right order.

  • Pro

    Dual Action CTA

    Slim bands

    A band call to action between solid rails with one split button: a Shine Button Get started link joined to a chevron that opens a menu of other routes, beside a headline and a sentence, in your theme.

  • Pro

    Pill Dual Action CTA

    Prices and offers

    A band call to action: the saving of paying yearly beside one pill split into two linked halves (monthly in outline, yearly on the Shine Button), with a closing row of three figures worked out from the two prices.

  • Pro

    Centered Light Link Secondary CTA

    With a closing band

    A centred statement for a notes app: a large headline, the Shine Button and a quiet changelog link beneath it whose underline grows from the middle, over a framed roadmap peek.

  • Pro

    Centered Light Trust Row CTA

    Trust and security

    A centred statement call to action for an accessibility scanner: a big headline, the Shine Button and an outline button, then a framed row of four trust cells on shared hairlines that each open a short note on what they cover.

  • Pro

    Centered Minimal Hero

    Type and motion

    A compact centered type-only hero: a two-line headline with a muted second line, one sentence, a Shine Button and a second action, on faded rails.

  • Pro

    Centered Event Details CTA

    With a closing band

    A centred call to action that follows the page theme, for a live event: a pill, the title and the Shine Button, then three bands between solid rails: the details in cells, the speakers with their roles and a seats meter.

All 100 cta blocks