shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show what the next plan adds, not a whole plan table, with this SaaS card for React with React Aria. A hairline frame holds a software listing at the start: a lettermark tile, the name, the category, a Segment Group for Free, Pro and Team, a Switch for yearly billing, the price per seat and one Shine Button. At the end, a side cell lists the features of the chosen plan and marks the rows that are new in it with a plus and the words "New in Pro". Yearly billing is worked out from the monthly price in cents (two months free). The list keeps the same height whichever plan is chosen. For tool directories, marketplaces and product pages that sell a plan ladder in a small space.
FAQ
How do I change the plans and features?
Edit PLANS for the names and the monthly price per seat in cents, and FEATURES for the list. A feature has a from level, the first plan that has it; a plan shows every feature up to its own level, and the rows whose level equals the plan's own are marked new.
How is the yearly price worked out?
Yearly billing pays for ten months of twelve, so the yearly total is the monthly price times ten and the price shown per month is that total divided by twelve, rounded once. $12 a month becomes $10 a month, billed $120 a year.
Why does the list not jump when I change plan?
The visible list sits over an invisible copy of the longest list in the same grid cell, so the card is always as tall as Team. The copy is hidden from screen readers and from the keyboard.
What stays local, and how do I wire it for real?
The plan and the billing period are page state. Nothing is charged, stored or sent. Replace the body of choose with a call to your checkout, and read the plans from your billing system.
