shadcn.io is not affiliated with official shadcn/ui
Region Rows Data Centers About Block for Vue
Region rows for a bare-metal host: six regions in an accordion with a status dot and a capacity bar, each opening to its hardware, round trips to its nearest regions and audits.
Installation
Overview
Region rows for Vue with Ark UI, written for Rackhaven, a fictional bare-metal hosting company. A compact header sits over six regions in an accordion that runs from rail to rail between hairlines. Each row shows the region's name and sites, a status dot with its word ("Operational" or "Maintenance", never a colour code) and a capacity bar with the racks in use, worked out from the racks used and installed. Opened, a row shows a tinted inset of three facts: the hardware in every node, the round trips to its two nearest regions (read from one table of region pairs, so both ends of a link agree) and the audits it has passed as badges. One row is open at a time. It's built from Accordion, Status, Progress, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For infrastructure and hosting companies that want a buyer to inspect each region. Region names are generic and the figures are example data.
FAQ
How do I add or change a region?
Edit REGIONS at the top of the file: each has a name, sites, state, racks and used, the hardware line and its audits. The percentage and the bar come from used and racks. Round trips live in PAIRS, one line per pair of regions; each region shows its two nearest pairs, so adding a region means adding its pairs, and its row picks them up.
How is the state shown without colour coding?
A row says its state in words beside a dot: a solid dot for "Operational" and a warning dot for "Maintenance". The dot is decoration, so a reader who cannot tell the two apart still has the word, and a screen reader hears only the word. The capacity bar is in the foreground tone and is hidden from assistive technology, because the row already says "37 of 48 racks" and "77%".
How does the accordion work for a keyboard?
Each row's header is a button inside an h3, so the regions are headings and Enter or Space opens one. Opening a row closes the open one, and the first row starts open.
Up and Down move between the rows' buttons.
Is the content of a closed row in the HTML?
Yes: a closed row keeps its facts in the page, hidden, so find-in-page and crawlers can reach them.
How does it fit on a phone?
Each row stacks its parts (name and sites, state, then the capacity bar with its racks and percentage), and an opened row's three facts stack in one column. The block ends on the last row, with no rule under it, so it joins the next block's top rule. Nothing scrolls sideways at 320 pixels.