Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Upsell Strip CTA Block for React

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.

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

An upsell band that shows what an upgrade adds before it asks for one, for React with Base UI. Between the page rails, a headline ("Unlock every component") and a sentence with a bold lead sit at the start and a Shine Button "See Pro plans" at the end. A closing band across the foot holds three cells on shared hairlines, Themes, Exports and Audit log, each with a lock and a Pro tag, in a real list. Below sm the three cells stack. It's built from Shine Button and Guides with Lucide icons and your theme's tokens, so the band is light on a light page and dark on a dark one. For freemium products, in-app upgrade nudges and feature-gated screens.

FAQ

How do I change the locked features?

Edit LOCKED at the top of the file: it is a list of names, and each becomes a cell in a real list named "Locked on the free plan". Each carries a lock icon and a Pro tag, so it reads as unavailable without looking disabled. The band is three columns from sm, so keep three names, or change sm:grid-cols-3.

Does the band stay dark on a light page?

No: it follows your theme, so it is light on a light page and dark on a dark one. The emphasis comes from structure: a closing band of cells between hairlines. It uses the background, foreground and muted tokens, never fixed colours, so a different preset restyles it.

How does it fit on a phone?

The band stacks: the text first, then the button, then the three cells one under another. Nothing has a fixed width, so it holds 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

    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

    Digit Countdown Banner

    Urgency and limits

    A slim early-pricing band between the page rails, in your theme: the offer at the start, then past a solid divider a live countdown to the end of this month in a small frame beside a Shine Button, with a hairline along the bottom edge that drains as the month runs out.

  • Pro

    Compact Left Right CTA

    Prices and offers

    A slim renewal band between solid rails with a Shine Button and an outline link on the end side, and a closing band of three cells that sets the two prices and the saving side by side.

  • 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