shadcn.io is not affiliated with official shadcn/ui
Percentage Fill Region Rollout Block for React
Six 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.
Installation
Overview
A region-by-region rollout for React with Base UI, written for Atlasroll, a fictional global edge platform. The title counts from the data how many of the six regions already run v3.9, and the header ends with the overall rollout as a rolling number, weighted by each region's share of traffic. Under a band rule that meets the rails, six rows run rail to rail with hairlines between them. Each row's own background is its progress: a tint fills from the start edge to the rolled-out percentage (a rolling row also draws a solid edge at the fill's end). A row names the region with its code and share of traffic, the percentage, the p95 latency, a state as a shape and a word (a checked filled square for Complete, a half-filled one for Rolling, an empty one for Queued) and when it ends ("Done Jul 14", or "ETA Jul 17"). The block ends on the last row. On a phone the latency and the end date drop and the state sits under the name. It's built from Sliding Number and Guides, with CSS only for the fills and your theme's tokens for every colour. The regions are fictional and the figures are example data.
FAQ
How do I change the regions and their progress?
Edit REGIONS at the top of the file: each has a code, a name, the percent of its fleet on the new version, its share of traffic, the p95 latency and an ISO date for when it finished or is expected to. The count in the title, the overall figure and each row's state word come from that list. The overall figure is the sum of percent times share over the total share, rounded.
How does the fill work, and is it only colour?
Each row carries one variable, its share as a fraction, and a tint spans that fraction of the row's track from the start edge, growing once on load (with reduced motion it simply appears). The percentage is also written as text, and the state is a shape and a word, so nothing depends on seeing the tint. The tint is a solid mix of the foreground and the background, so text on it keeps its contrast.
What does a queued region show?
Its fill is empty, its percentage reads 0%, the latency says "No data" because nothing has been measured on the new version yet, and its end date is an estimate ("ETA Jul 20"). A finished row says "Done" with the day.
Related
- Pro
Blue Green Swap Zero Downtime Deploy
Deploys and rolloutsA blue-green swap for a deploy tool: two environment cells with instance dots, a 0, 10, 50 and 100 percent traffic toggle that redraws the split bar, the dots and the phase list, and a fixed Downtime 0 s.
- 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
Deployment Regions Map Changelog
Deploys and rolloutsA 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.
- Pro
Lanes With Gates Release Train
Deploys and rolloutsA release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.
- 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
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.