shadcn.io is not affiliated with official shadcn/ui
Upsell Strip CTA Block for React Aria
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.
Installation
Overview
An upsell band that shows what an upgrade adds before it asks for one, for React with React Aria. 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.
Where does the link go?
See Pro plans is a link with href="#": point it at your pricing page.
The Shine Button renders a link when it has an href.