shadcn.io is not affiliated with official shadcn/ui
Regional Breakdown Rows Logos Block for React
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 React with Base 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.
Related
- Pro
Stacked Rows With Category Labels Logos
Maps and listsCustomers of a print-on-demand book service in three rows by industry on alternating tinted bands, each with a label and a customer count chip, the logos lying open under them.
- Pro
Regional Tabs Logos
Maps and listsCustomers of a candle-subscription service by region: four tabs with counts switch a two-column list, each cell a wordmark with its city and country.
- Pro
Region Picker Map Logos
Maps and listsA region picker beside a dot-grid world map for a shipping-label tool: choosing a region lights its land and rolls two figures, labels a day and carriers connected, to that region's values.
- Pro
Dot Grid Map Logos
Maps and listsA world map for a freight-forwarding tool, drawn as a grid of dots in a framed figure, with six customer pins at their cities and one chip per region carrying its customer count.
- Pro
Row Labels Dual Marquee Logos
Multi-row marqueesTwo rows of customers of a factory-scheduling service, each a band with an Aerospace or Automotive label cell at the start, divided from the moving logos by a hairline.
- Pro
A wall of eighteen wordmarks for a bug tracker in three rail-to-rail bands laid like bricks, no lines between the logos, the middle band shifted half a logo's width.