shadcn.io is not affiliated with official shadcn/ui
Plan Selector Billing Block for React
A plan for each project in its own select, with a signed price difference per row, a Monthly or Yearly choice, and an account total that re-derives with the moves written out.
Installation
Overview
Let a customer put each project on the plan it needs, with this plan selector for React with Base UI. It opens with the account of Gablework, a site builder for small shops, with three projects: a Docs site on Pro, and a Shop and a Staging site on Free. A Monthly or Yearly Segment Group sits in the header (yearly is ten months for twelve). A hairline frame with a plus mark on each corner holds three ruled rows, each with the project's name, a Native Select for its plan (Free, Pro or Business, with the price in the period) and the signed difference it makes, such as plus $20.00. Under the rows the account total derives from the choices, next to what it was before, with the moves in words: Shop Free to Pro, Staging Free to Pro. The Shine Button applies the changes and counts them, the only colored control. On a phone each select drops under its project's name. It's built from Segment Group, Native Select, Shine Button and Guides, with a CSS entrance only. For billing settings, multi-project accounts and any product priced per workspace.
FAQ
How do I fill it with my projects and plans?
Edit PROJECTS (an id, a name, a short note and the plan it is on when the page loads in start), TIERS (an id, a name and cents a month for one project) and PERIODS (how many months an invoice covers). DRAFT_START holds the choices the form starts with. Prices stay in integer cents and each row is added up as it is, so the words and the total agree.
How does Yearly change the numbers?
A yearly period bills ten months for twelve, so every price becomes ten times its monthly price and the unit changes from a month to a year. The rows' differences, the total and the total before the changes all follow the period; the plans you chose stay as they are.
What does Apply do, and what stays local?
It makes your choices the saved plans in the page and says "Applied in this demo. Effective on your next invoice." in a polite status message. No project is changed and nothing is charged. In your app send the list of changes to your server and update the subscription there, then read the saved plans back from the result. Apply stays focusable when there is nothing to apply and answers "No changes to apply."
Is it accessible?
Each select is named for its project ("Plan for Shop") and is a native select, so it works with every keyboard and screen reader and opens the system picker on a phone. The difference beside a row is text with its sign, not a color, and the foot's count and the total are in the status message.