shadcn.io is not affiliated with official shadcn/ui
Purchasing Power Pricing Block for Solid
Regional pricing by purchasing power: pick a country and the price follows a published index, with the list price struck, the discount on a scale and a note on how the country is verified at checkout.
Installation
Overview
Price fairly in every country with this purchasing power pricing block for Solid with Ark UI. A compact header explains the idea in one sentence, and one panel does the rest. On the left, a Select picks the country and a scale shows how far below the list price it sits, from the list price to 60% off. On the right, the adjusted price is the headline in large figures, rolling to its new amount with Sliding Number, with the struck list price and an outline Badge showing the discount beside the plan's name. A Shine Button names the price and is the block's only primary element, and a note under it says how the country is checked at checkout. Countries that pay the list price say so instead of showing a discount. The section sits on the page's lines, drawn by Guides: side rails and a rule along its top, with the two halves sharing a Frame. Built with Select, Badge, Sliding Number, Frame, Shine Button, Guides and Lucide icons, with CSS transitions only. For online courses, developer tools and any product sold in countries with very different incomes.
FAQ
How do I change the countries and the discounts?
Edit COUNTRIES at the top of the file. Each has a label, a value (the ISO code) and a discount, the percent below the list price, where 0 means the list price. LIST_PRICE is the yearly list price and MAX_DISCOUNT is the far end of the scale; the marks under the scale are in MARKS. The price in every country is LIST_PRICE reduced by its discount, so keep discounts that give whole dollars or round them in priceOf.
Where do the discounts come from?
They're sample numbers: the block doesn't ship an index. Build yours from a published purchasing power parity table or from your own conversion data, group countries into a few tiers (it's easier to explain and to verify than one price per country), and review it once a year. The copy under the scale says the prices follow a published index, so make that true for your numbers.
How do I stop people from picking a cheaper country?
The picker only previews the price. The real check belongs in your checkout: compare the country on the card's billing address or the IP address with the country the buyer picked and fall back to the list price when they don't match, as the note under the button promises. Keep the same rule for renewals so a discount doesn't outlive a move.
Where does the call to action go?
"Join Hillside" is a real link. Point it at your checkout and pass the chosen country in the query string so checkout can start from the same price.
Is it accessible?
Yes. The country picker is named, the struck price is read as "List price", the discount badge as "off the list price", and the scale is decorative because the sentence beside it says the same in words. The price isn't a live region, so choosing a country doesn't interrupt a screen reader; a polite status line announces the new yearly price once.