shadcn.io is not affiliated with official shadcn/ui
Region Pricing Block for React Aria
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 href, which React Aria renders as a link. 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.