shadcn.io is an independent project built on shadcn/ui
Installation
Overview
An upsell band that shows what an upgrade adds before it asks for one, for React with Radix 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.
Where does the link go?
See Pro plans is a link with href="#": point it at your pricing page.
The Shine Button takes asChild with the link inside, so it can be your router's link.
