shadcn.io is not affiliated with official shadcn/ui
Regional Breakdown Rows Logos Block for Vue
Customers of a land-registry product in four rows, one per region: a label cell with the region, its team count and a thin share bar, then the region's four wordmarks past a hairline.
Installation
Overview
A logo breakdown by region for Vue with Ark UI. A start-aligned header, "Land records for 2,400 registry teams", sits over four rows that run from rail to rail, each ruled at its top with + marks where it meets the rails. A row opens with a label cell: the region's name, its team count and its share of all teams, with a thin bar that draws the share. Past a hairline that reaches the row's rule, the region's four customer wordmarks lie open, in their own lettering, muted until hovered. The shares are worked out from the team counts, so they always add up to a hundred, and the bar and the text say the same thing. On a phone each row stacks, the label over its logos two across. The last row ends the block, so the next section's top rule closes it. Built from Guides and Lucide icons, with CSS for the entrance.
FAQ
How do I change the regions and customers?
Edit REGIONS at the top of the file. Each region has a name, its teams and a list of customers (a name, an icon, a lettering and a mark). The header's total and every share are worked out from the teams, so there is nothing else to keep in step; the names are fictional placeholders for your own customers.
Why do the shares add up to a hundred?
Each share is the region's teams over the total, rounded to a whole percent: 38, 31, 9 and 22 here. With other numbers the rounded shares can add up to 99 or 101; if that matters, show one decimal or let the largest region take the remainder.
Is the bar part of the content?
No: it only draws what the text next to it says ("912 teams, 38% of all"), so it is hidden from assistive technology. Its fill is set by a CSS variable and it starts at the reading side in a right-to-left layout.
How is it announced by a screen reader?
The rows are a list named "Customers by region"; each row has an h3 with the region's name and a list of its customers, named after the region. The icons are hidden and the names are text, at full-strength muted text colour that passes WCAG AA. Nothing in the rows is focusable.