shadcn.io is not affiliated with official shadcn/ui
Deployment Regions Map Changelog Block for React
A dot map of the world with eight region markers that open a popover, a header key (Rolling out, Complete) and a band of cells with progress bars that says the same in words.
Installation
Overview
A deployment-regions changelog for React with Base UI, written for Atlaswise, a fictional global edge platform. A header counts the regions from the data ("v6.3 is live in 6 of 8 regions") and keeps a two-line key (Rolling out, Complete, each with its count). Under it one inset framed figure with + marks on its corners: the land is a coarse bitmap of 48 by 20 cells at module scope, drawn as one SVG path of round dots, and each of the eight regions is a marker button on it. A marker opens a popover with the region's version, rollout, p95 latency and last deploy; a filled marker is a finished region, a ringed one is still rolling out. Under the map a band of eight cells on shared hairlines says the same in words, each with a progress bar, so the map is never the only way to read a region. It's built from Guides, Popover and Progress, with CSS transitions for the entrance and your theme's tokens for every colour. For status pages and release pages with a global rollout. The regions and figures are example data.
FAQ
How do I change the regions or the map?
Edit REGIONS for the regions (a name, an id, the rollout percentage, the version, p95 and the last deploy as an ISO string) and LAND for the map: each string is a row of 48 cells, # for land and . for sea. A region's marker sits at its column and row in those cells, so move it by changing two numbers. The headline, the key counts and the bars are computed from the list.
Is the map the only way to read a region?
No. The map is decoration with markers on it; the band of cells underneath lists every region with its state in a word, its rollout, its version and its latency, and the markers are buttons with names. The dot drawing itself is hidden from assistive technology.
How do the markers work?
Each marker is a button that opens a popover with the region's facts; only one is open at a time, Escape closes it and focus returns to the marker. It opens on click or Enter, not on hover, so it also works with a keyboard and on a phone.
How is a rolling-out region told apart from a finished one?
By shape and word, never colour: a filled marker and a filled square with "Complete", a ringed marker and a half-filled square with "Rolling out". The popover and the cell say the state again in words.
How does it fit on a phone and in a right-to-left layout?
On a phone the map scales down and the cells, two to a row, do the work of the markers. The map is always drawn left to right because geography does not mirror; the rest of the block mirrors, and versions, percentages and times keep their reading order.
Related
- Pro
Percentage Fill Region Rollout
Deploys and rolloutsSix regions as rail-to-rail rows whose own background fills to the rolled-out percentage, with latency, a state shape and word, an end date, and a traffic-weighted overall figure.
- Pro
Environment Promotion Ladder Changelog
Deploys and rolloutsA promotion ladder of four stages as rows with a rollout bar, time in stage and a Collapsible that lists each stage's gates.
- Pro
Canary Release Ramp Changelog
Deploys and rolloutsA split with a five-step canary ramp as buttons at the start and, at the end, the chosen step as canary against stable in two cells with a guard-rail bar.
- Pro
Release Pins Service Health Dashboard
Incidents and uptimeA health board for a hosting product: four service lanes of thirty daily cells, with a row of release pins above them that open a card of what shipped, and the month's uptime at the end of each lane.
- Pro
Split Status Page
Incidents and uptimeA split status page for a hosted status service: the 90-day uptime and four components with their state at the start, the three most recent releases at the end, and a divider between them.
- Pro
Tabbed Window Uptime History
Incidents and uptimeA tabbed window of ninety-day uptime for an uptime monitor: one tab per service, a large uptime figure that rolls to the new service, a strip of ninety daily bars and a three-row table of incidents.