shadcn.io is not affiliated with official shadcn/ui
Renewal Check Survey Subscription Billing Block for React Aria
Three questions before a plan renews (how many people used it, which feature matters most, whether needs will change) that a small rule table turns into a recommendation to keep, drop to a smaller plan or move up, with the reasons and the yearly difference.
Installation
Overview
Help customers right-size their plan before it renews, with this renewal check for React with React Aria. A hairline frame with a plus mark on each corner holds three ruled questions, each a set of radio rows that fill the width: how many people used the product last month, which feature matters most, and whether needs will change next year. Shine Button See my recommendation, the only colored control, works the answers through a small rule table and shows the result in the band above the foot: a headline such as "Drop to Solo, saves $360.00 a year", the reasons it drew from your answers, and the current plan against the recommended one with their yearly cost. A ghost Apply this notes the change. For developer tools, analytics, team software and any plan sold by size.
FAQ
How does it choose a plan?
recommendOf is a small rule table at the top of the file: fifteen or more people, or nine to fourteen who expect to grow, point to the larger plan; one or two people who need only personal reports and do not expect to grow point to the smallest; everything else keeps the current plan. The headline and the yearly difference come from the plans' prices in PLANS, so changing a price changes the sentence. Replace the table with your own rules, or with a call to your pricing service.
Why not the catalog Questionnaire?
The Questionnaire shows one question at a time, but it is a React-only component, and this block has to ship to Vue, Svelte and Solid as well. So the three questions are plain fieldsets of native radio buttons, all on screen, which also keeps the total length visible. Each row is a label around a visually hidden radio, so the tab order, arrow keys and the checked state are the browser's own.
What if a question is skipped?
Pressing See my recommendation with a question unanswered does not show a result: the status line names the first open question and focus moves to its first answer. Changing any answer after a result hides the result again until you ask for it, so the recommendation never describes answers you have since changed.
What stays local in the demo, and how do I wire it?
Nothing is sent. Apply this notes the choice in a polite status message ("Noted in this demo. Nothing was sent.") and leaves the plan alone. In your app, post the answers to your server for analysis if you want them, and make Apply this call your plan-change flow, which should confirm the new price and the date it takes effect before it changes anything.
What does a screen reader hear?
Each question is a group whose label is the question, with its hint beneath, and each answer is a radio named by its words. The count in the heading ("2 of 3 answered") and the status line are polite. The recommendation's headline takes focus when it appears, so it is read at once.