shadcn.io is not affiliated with official shadcn/ui
Plan Recommender Pricing Block for React
A needs checklist for picking a plan: tick what you need and the cheapest plan that covers every need lights up with its price, while each need says which plan it starts at.
Installation
Overview
Let visitors build their requirements and find the plan from them with this plan recommender section, shown here for Chairside Booking, a booking tool for salons. A header row introduces the idea in one line, and one ruled band, with + marks on its corners, splits on a vertical hairline: on the left, twelve needs in cells that share hairlines, each a Toggle with a check, its name and the plan it starts at ("Every plan", "Studio and up", "Salon only"); on the right, the plan they point to. The match is the cheapest plan that has every ticked need, shown with its name, its tagline, its price rolling to each new amount with Sliding Number and the section's one filled Shine Button, over a three-step ladder that lights the matched plan and a line saying which needs put it there ("Studio because of deposits and no-show fees"). Needs the match doesn't cover are marked in strong text, so ticking one shows what it adds. On a phone the needs sit in two columns and the match becomes a bar pinned to the bottom of the screen, with the plan, its price and the button always in reach. Built with Toggle, Sliding Number, Shine Button, Guides and Lucide icons, with CSS transitions only. For booking, scheduling and any product whose plans are defined by the features they unlock.
FAQ
How do I change the needs and the plans?
Edit PLANS and NEEDS at the top of the file. A plan has its name, tagline, per-location price, a limits line and its call to action's cta and href; list them from cheapest to dearest. A need has a label and plan, the index in PLANS of the first plan that has it (0 is the cheapest). AVAILABILITY is the line under each need, one per plan index, and FIRST_NEEDS the needs ticked on load. The match is the highest plan index among the ticked needs, so it is always the cheapest plan that covers all of them.
How does a visitor see why a plan was picked?
Two ways. Each need names the plan it starts at, and the ones the current match doesn't cover read in stronger text than the rest. And under the ladder one line names the ticked needs that put the match where it is, such as "Studio because of deposits and no-show fees", with a reminder that unticking them moves the match down. When every ticked need is on all plans, the line says so.
How do I send the matched plan to checkout?
The call to action is a link to the matched plan's href, and its label follows the plan ("Start with Studio"). Build the href from the plan and the ticked needs, such as /signup?plan=studio&needs=deposits,sms, so sign-up and analytics know what the visitor asked for.
It's a ShineButton with render set to an a element and nativeButton={false}.
Is the checklist accessible?
Yes. The needs are toggle buttons in a group named by their heading ("What does your salon need?"): Tab reaches each one and Space or Enter ticks it, and each announces as pressed or not. A polite live region says the new match after every change, as in "Studio covers your 3 needs: $49 per location per month", and stays silent on load. The ladder marks the matched plan with aria-current as well as its dark fill, and the price is read "per location per month".
How does it work on a phone?
Below the lg breakpoint the needs fill the screen in two columns and the match becomes a bar stuck to the bottom of the section: the plan's name, its price and the filled button on one line, so the answer is visible while you tick. It scrolls away with the section. The ladder and the reason line follow the needs, below the bar's natural place.
When should I use a needs checklist instead of a quiz or a table?
Use a checklist when plans are nested (each one has everything in the one below), and what a buyer cares about is a handful of concrete features: ticking them is faster than answering questions and clearer than reading a comparison table. Use a quiz when the difference is about habits, and a table when buyers already know what they're comparing.
Related
- Pro
Affinity Quiz Pricing
Plan findersA four-question personality quiz that matches visitors to a plan: the headline beside the quiz, lettered answer cards, and a result with the matched plan, its price and each plan's share of the answers.
- 123Pro
Stepper Wizard Pricing
Plan findersA three-question wizard in one ruled band, with numbered steps, the question beside its answer cards and Back and Next, that recommends a plan, then shows its price, features and a summary of the answers.
- Pro
Addon Builder Pricing
CalculatorsA CRM sold as a base plan plus six add-ons that switch on and off in cells sharing hairlines, with the price per seat rolling big beside them and a sticky total bar on phones.
- Pro
Feature Unlock Pricing
Charts and figuresA field of feature chips for a podcast host: pick Hobby, Show or Network and the chips each plan includes light up, the ones it adds get a stronger outline, and the rest stay locked.
- Pro
Audience Tabs Pricing
Plan cardsThree large audience tiles in the header row (freelancer, studio, agency) that open their own plans: cells that share hairlines on desktop, one plan at a time behind a segment group on a phone.
- 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.