Bolt prompt to build a pricing page
Pricing pages die by hardcoding: a price in the JSX, a savings percentage that drifts out of date, a toggle wired to strings. This prompt has Bolt put every number in one config file and derive the rest, so a price change is a one-line edit you can verify in the preview immediately.
Last updated
Build a pricing page as src/pages/Pricing.tsx in this Bolt project, Tailwind for styling, no new dependencies. Layout: three tier cards, Free, Pro, Team, in a single row that stacks vertically under 700px. Pro gets a highlighted border and a Most popular tag, and all cards stay equal height regardless of feature list length. Above the cards, a monthly and annual toggle implemented as a real radio group, not two styled divs. Annual view shows per-month pricing with a small billed yearly note and a savings badge computed from the two numbers in config, never hardcoded as a percentage string. If the computed savings is zero or negative, hide the badge. All plan data lives in src/pricing.config.ts: name, monthly, annual, tagline, features, CTA label, CTA target. The page renders entirely from that file so prices change without touching JSX. Feature lists: a checkmark for included items, excluded items in muted gray reading Not included with no icon. Any feature needing context gets an info icon whose tooltip opens on focus as well as hover. Below the cards, a comparison table built from the same config, sticky first column, horizontal scroll contained inside its own wrapper on small screens. Then three billing questions in native details elements. Edge cases: a zero price renders Free instead of $0, a tier missing an annual price hides its toggle-dependent block, and currency goes through Intl.NumberFormat. Acceptance: flip the toggle and confirm every price, badge, and CTA updates from config alone, then narrow Bolt's preview to phone width and verify the page never pans horizontally.
Same task in other tools
Questions about this prompt
Why compute the annual savings badge instead of writing Save 20 percent?
Because the copy and the numbers will drift apart the first time pricing changes. Deriving the badge from the monthly and annual values in pricing.config.ts means it is always true, and when the gap becomes zero or negative the badge hides itself rather than lying.
How do I add a fourth tier or an enterprise contact card?
Add an entry to the config array and the grid renders it. For contact-style tiers, give the entry a null price and a CTA target pointing at your contact route, then ask Bolt to render null-price tiers without the toggle-dependent price block. The comparison table picks up the new column from the same config.
The comparison table blows out the page width on mobile in the preview. Fix?
The table must scroll inside its own container, not the page. Confirm the wrapper has overflow-x auto and the sticky first column has a solid background, then narrow Bolt's preview to phone width. If the whole page still pans sideways, some flex child inside a card is missing min-width zero.