shadcn.io is not affiliated with official shadcn/ui
Region Pricing Block for React
Infrastructure pricing by region for a container host: a grid of six regions with each one's latency and price per hour, where choosing one re-prices the call to action beside it and the three instance sizes under it.
Installation
Overview
Let buyers pick where their workload runs, and see what it costs there, with this region pricing section, shown for Kelp Containers. Six regions sit in a grid of cells that share hairlines, each with its city, its code, its latency in milliseconds with a bar drawn against the slowest region, and its price per instance-hour. They are a Segment Group, a radio group, so choosing a region marks its cell with a solid frame and re-prices the rest: beside the grid, the region's name, the smallest instance's hourly price at display size, rolling with Sliding Number, what it costs if it runs all month and the one primary Shine Button, "Deploy in Frankfurt". Under the grid, in the same ruled band with + marks on its corners, the three instance sizes show their price per hour and per month in that region. Built with Segment Group, Sliding Number, Shine Button, Guides and CSS transitions only. For cloud hosting, edge networks, databases and any product whose price depends on where it runs.
FAQ
How do I add a region or change its price?
Add an entry to REGIONS with its city, zone code, latency in milliseconds and price, the cost per hour of the smallest size there. The three sizes in SIZES have a multiplier on that price (1, 3 and 8), so you only keep one price per region; change a multiplier, or replace hourly with a lookup of your own prices, when sizes don't scale that way. HOURS_A_MONTH turns an hourly price into the monthly one.
Where do the latency figures come from?
They are fixed in the file: the median round trip from the city named in FROM_CITY, written under the grid, so they are sample figures to replace with your own measurements. To show the visitor's real latency, time a small request to each region's endpoint in the browser and store the results in state, then pass them to the grid in place of latency. The bars are drawn against SLOWEST, so raise it if a region is slower than 300 ms.
How do I send the chosen region to the deploy flow?
The call to action is a real link to DEPLOY_HREF. It's a ShineButton with render set to an a element and nativeButton={false}. Add the region's zone to it, such as /deploy?region=eu-central-1, and have your server price the deployment from that region.
Is the region grid accessible?
Yes. The grid is a Segment Group, a radio group named "Region, with its latency from Berlin and its price an hour": Tab reaches the selected region and the arrow keys move and select. Each region is read with its city, code, latency and price. A visually hidden polite live region announces the new region, its price and its latency once you choose, and only then, while the rolling prices aren't live regions. The latency bars are decorative.
How does it look on a phone?
The regions stay a grid, two to a row, so six regions take three short rows and the price and the deploy button follow within the first screen and a half. The sizes list comes next with its price per hour; the per-month column appears from sm, where there is room for it.
When should I price by region instead of one global price?
When the price really differs by region, because of infrastructure, energy or regulation, and buyers choose where to run. Show the difference as a choice they make, with the latency that goes with it, as here. A single global price is simpler to run and to explain, so prefer it when every region costs you the same.
Related
- $€£¥₹Pro
Currency Select Pricing
Billing switchesPrices in the visitor's currency for a travel planner: five large currency chips in the header and three plan cells whose prices roll at display size between dollars, euros, pounds, yen and rupees, each currency with its own local price points.
- Pro
Billing Toggle Pricing
Billing switchesThree plan cards under a monthly and yearly switch that wears its saving in the header row, with prices that roll to their new amount and each plan a card in a card.
- Pro
Three Columns Pricing
Plan cardsThe canonical three-column pricing section for a team knowledge base: Personal, Team and Company cells under a monthly and yearly switch, each outlined by hairlines that overshoot its corners, the recommended plan raised, one plan at a time on phones.
- Pro
Government Plan Pricing
Comparison tablesGovernment pricing led by its compliance: a strip of large certification cells under the heading, then one table comparing three annual plans, with specialist terms explained on demand.
- Pro
Enterprise Custom Pricing
Sales and partnersAn enterprise pricing band for a cloud that follows the page theme: the title beside a raised card with a Custom price and a call to sales, then three columns of capabilities and customer wordmarks, with the list collapsed on phones.
- 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.