shadcn.io is not affiliated with official shadcn/ui
Plan Comparison Minimal Billing Block for React
Five plan limits set against an account's own use, with the Free limits it has already passed marked Over and a count of them in the header, and a single upgrade button.
Installation
Overview
Show a customer why a plan fits them, with this minimal plan comparison for React with Base UI. It opens with the account of Daybloom, a habit tracker. A hairline frame with a plus mark on each corner holds a native table of five limits (members, storage, analytics, API access and support) with four columns: the limit, what the account uses today in an outline Badge, and what Free and Pro each allow. A Free limit the account has already passed reads Over, a glyph and a word on a solid tint, and the page header counts them: 3 of 5 limits are already past Free, and Pro has room for all of them. Nothing toggles; every figure is derived from the typed usage and limits. The Shine Button upgrades to Pro, the only colored control. On a phone the Free and Pro columns fold into the first cell, one line each, so two columns remain. It's built from Badge, Shine Button and Guides, with a CSS entrance only. For billing settings, upgrade prompts and any app with a free tier.
FAQ
How do I fill it with my plans and the account's use?
Edit LIMITS. Each limit has a label, the singular and plural words of its unit (one, many), what the account usage is today, and what the free and pro plans allow. Everything else is derived: which Free limits are passed, how many, the sentence in the header and the Over marks. Build the list from your billing provider's plan limits and your own usage counts, and set PRO_CENTS to the plan's price.
How is Over decided?
A limit is Over for a plan when the account's use is more than the plan allows, so 3 members against 2 on Free is Over and 1.4 GB against 1 GB too, while 0 API keys against none is not. Pro's cells are never marked here because the sample use fits inside all of them; if one did not, the header would say how many limits would still be past Pro. The mark is a glyph and the word, never only a tint.
What does Upgrade to Pro do, and what stays local?
It says "Upgrade started in this demo. Nothing was charged." in a polite status message and the button then waits. The usage, the limits and the upgrade are all typed or local. In your app send the person to your checkout or call your billing provider to change the plan, and read the usage from your own counters so the Over marks stay true.
Is the table accessible?
It has a caption, column headers and the limit as the row header, so a screen reader reads each row as "Members, you 3 members, Free 2 members, Over". The numbers are in tabular figures and wrapped so they keep their order in a right-to-left page.
How does it look on a phone?
Four columns would be cramped, so below the small breakpoint the Free and Pro columns are hidden and their figures are repeated in the limit's own cell, "Free: 2 members, over" and "Pro: 10 members". The account's use stays in its own column and the upgrade button rides a bar at the foot of the panel.