shadcn.io is not affiliated with official shadcn/ui
Plan Comparison Settings Billing Block for React
Every plan side by side inside app settings: a table with the account's own plan marked and tinted, one change button per plan, a row for when each change takes effect, and plan tabs on a phone.
Installation
Overview
Show customers where they stand among the plans without leaving settings, with this plan comparison for React with Base UI. A hairline frame with a plus mark on each corner holds a native table: the features run down the side and the plans across the top. Each plan's header gives its name, its price and the way to it, a Shine Button to upgrade, the only colored control, an outline Button to switch to a lower plan, and plain text on the account's own plan, which carries a Badge and a tinted column. The last row says when each change takes effect: today and prorated for a higher plan, the end of the period for a lower one, the renewal date for the current plan. On a phone a Segment Group picks one plan at a time to read beside the feature names. For SaaS account settings, in-app upgrade pages and admin consoles.
FAQ
How do I fill it from my billing provider?
Three constants at the top of the file. ACCOUNT has the current plan's id and the renews date as an ISO string. PLANS lists the plans in order with an id, name and monthly price. FEATURES has one row per feature with a label and a values array with one entry per plan, in the same order: text, or a boolean for included or not. Which plans are upgrades follows from the prices against the current plan's, so reordering plans or changing the current one needs no other edit.
How is the effective date chosen?
By comparing prices with the current plan. A plan that costs more is "Today, prorated", a plan that costs less takes effect on the renewal date, so the customer keeps what they paid for, and the current plan shows "Renews" with the date. Change takesEffect if your rules differ, for example when you allow an immediate downgrade with a credit.
Where do the change buttons go?
They're links to your own upgrade and downgrade pages, so point each href there, perhaps with the plan's id. They read "Upgrade to Studio" and "Switch to Free", so each says where it goes. Each is a Button or Shine Button with render set to an a element and nativeButton={false}.
Is the table accessible?
It's a real table with a caption for screen readers, plan names as column headers and feature names as row headers, so each cell is read with both. Included and not included are a check or a dash with hidden text that says which. The segment group on a phone is named "Plan". Nothing in the table scrolls sideways at any width.
How does it look on a phone?
Only one plan column shows at a time, beside the feature names, chosen with the segment group above the table; it starts on the plan with the upgrade so its button is within the first screen. From the medium breakpoint all the plans show side by side and the segment group is hidden. The hidden columns are not in the tab order or the accessibility tree while hidden.
Related
- Pro
Current Plan Billing
Plan and usageThe account's current plan in app settings: plan, price, renewal date and card, a change-plan action, every quota's usage this period on shared hairlines, and the next invoice.
- Pro
Upgrade Proration Billing
Upgrade and downgradeChanging plan inside app settings with the bill worked out first: pick a higher plan and the credit for unused days, the new plan's cost for those days, what's due today and the next invoice roll live, then an alert dialog confirms the charge.
- Pro
Downgrade Confirmation Billing
Upgrade and downgradeA downgrade that shows what it costs first: the limits that shrink, the folders now over the smaller plan's storage with a checkbox to archive each and a live meter, the day it takes effect, and an alert dialog that asks for a typed word.
- Pro
Comparison Table Pricing
Comparison tablesFour plans compared feature by feature in one table whose hairlines meet the page rails, with a billing switch, a tinted popular column and, on a phone, a plan switch that keeps the feature column beside one plan.
- Pro
Feature Matrix Pricing
Comparison tablesA feature matrix you can interrogate: search the features, hide the rows every plan shares with a switch, and watch a live count in the table's corner, over four chat plans and twenty-eight features.
- Pro
Side by Side Pricing
Comparison tablesA before and after reveal: drag a handle across one photo editor to turn the Free version into the Pro version, with each half's price and button right under it.