Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Icon Banner CTA Block for React

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.

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 banner for React with Base UI, split into cells between the page's solid rails. A muted icon tile sits in a cell of its own at the start, a solid divider (with a + mark where it meets the top rule) separates it from a short title with one line of detail, and a Shine Button, the only primary control, sits on the end side. On narrow screens the divider goes away and the button drops to a full-width row under a rule. It's built from Shine Button and Guides with Lucide icons and your theme's tokens, with nothing animated but the button's light, and it follows the theme. For documentation page footers, inline breaks in long content and dense product pages, where a full-size CTA band would take over.

FAQ

How do I change the icon and the copy?

Swap TerminalIcon for any Lucide icon, and edit the title and detail line in the markup. The tile is a muted square with a faint ring, so primary stays on the button; the icon is hidden from assistive technology because the title says the same thing in words.

Why is the title an h2?

A banner is a section of its own, so its title is a level-two heading set at body size; it is not an h1. If you embed the banner inside an existing section, change it to the next level down.

How does it fit on a phone?

The icon and text stay together on one row, the divider is hidden and the button drops below them at full width, under a rule. Nothing has a fixed width, so a longer label never overflows, down to 320 px.

When should I use it instead of the icon action banner?

Use this one when the banner has a clear verb to put on a button, such as Get an API key. Use the icon action banner when the whole row should be the target.

  • Pro

    Icon Action Banner CTA

    Slim bands

    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.

  • 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

    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

    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

    Left Right Row CTA

    Slim bands

    The baseline left-right call to action: a split between solid rails with a headline and one line at the start and, past a divider, a tinted cell at the end that holds the Shine Button over an outline action.

  • 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