Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Icon Accent CTA Block for Radix UI

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 Radix 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 takes asChild with the link inside, so it can be your router's link.

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.

All 100 cta blocks