Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Icon Action Banner CTA Block for React

A slim documentation band between solid rails: a framed icon tile, a title that is one big link over the whole row, and a Shine Button to the quickstart.

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 slim band where the whole row is a target, for React with Base UI. A framed icon tile (its corners marked with + crossings), a bold title with one line of detail and a Shine Button share one row between the page's solid rails. The title is the one link, and Link Overlay stretches it across the entire row, so a click anywhere lands on the docs; the row tints on hover and rings on keyboard focus. The Shine Button, the band's only primary control, goes to the quickstart and stays clickable above the overlay. It's built from Link Overlay, Shine Button and Guides with Lucide icons and your theme's tokens, and it follows the theme. For docs entries and resource links where a small button would be an easy miss.

FAQ

How does the whole row become a link?

The title is wrapped in Link Overlay, inside a Link Box. The overlay's ::before covers the Link Box's whole area, so there is one link in the markup, named by its title, and the pointer treats the entire row as that link. Any other link you add inside the row stays clickable above it.

How can a button sit inside a link row?

It is not inside the link: the Link Box lifts every other link above the overlay, so the Shine Button is its own link to a different place (the quickstart) and stays clickable, while a click anywhere else on the row goes to the title's link. Give the two different destinations: two links to the same page would repeat themselves to a screen reader.

What does keyboard focus look like?

Tab goes to the title link, which takes a ring and tints the whole row, so the focus is as large as the click target, then to the Shine Button.

What moves, and what about reduced motion?

The row's tint eases in over 200 ms and the title underlines, both CSS transitions that happen at once with reduced motion on. The Shine Button sweeps its light once on hover and focus; with reduced motion the light fades in where it stands.

How does it fit on a phone?

The tile and the text stay on one row and the Shine Button wraps below them at full width, so nothing overflows at 320 px.

  • Pro

    Icon Banner CTA

    Slim bands

    A slim band split into cells between solid rails: an icon tile, a solid divider, a title with one line of detail, and a Shine Button link on the end.

  • Pro

    Availability Strip CTA

    Slim bands

    A slim support band with a world clock between the page rails: a headline at the start, a framed figure of three hub clocks that show local time and whether each hub is staffed, and a Shine Button to book a call.

  • Pro

    Version Banner CTA

    Slim bands

    A slim release band between solid rails: a version badge, the headline change, a Shine Button to the notes and a disclosure that opens a second band of three change cells.

  • Pro

    Upsell Strip CTA

    Slim bands

    A slim upsell band between the page rails: a headline and a sentence with the Shine Button to the Pro plans, and a closing band of three locked features on shared hairlines.

  • Pro

    Dismissible Announcement Bar Hero

    Updates and timelines

    A showcase hero for a release planning tool: a dismissible announcement band, a headline beside the pitch, a Shine Button, a trust line and a framed sketch of a release board that runs off the bottom.

  • 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.

All 100 cta blocks