shadcn.io is not affiliated with official shadcn/ui
Plan Comparison Settings Billing Block for Vue
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 Vue with Ark 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.
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.