shadcn.io is not affiliated with official shadcn/ui
Tile Map Awards Block for React
A tile map of fifteen countries as two-letter squares; the nine with awards are one toggle group, and choosing one fills a panel with its awards.
Installation
Overview
A tile map of awards for React with Base UI. Fifteen countries are drawn as square tiles holding a two-letter code, in a rough geographic arrangement of five columns: the Americas at the start, Europe in the middle, Africa below. The nine countries with awards are solid tiles in one toggle group (the pressed tile is solid foreground); the six without are dashed and quiet. Choosing a tile fills the panel beside it with that country's awards: a drawn mark, the award, its programme and the year. A tally in the header ("9 countries, 12 awards since 2023") is counted from the list, every panel is stacked unseen so the block keeps the height of the longest, and on a phone the map sits under the header with the panel under it. The programmes and awards are made up for the example: replace TILES with your own.
FAQ
How do I add a country or an award?
Edit TILES: each tile has a code, a name, its place in the five-column grid (literal classes such as col-start-3 row-start-2) and a list of awards. A tile with awards becomes a control; one without stays a quiet square. The counts and the tally come from the list.
Which keys work?
Tab moves into the tile group and the arrow keys step through the tiles that have awards; Space or Enter chooses one. Exactly one tile is always chosen, and the panel announces the country and its count politely.
Does the panel change the block's height?
No. Every country's panel is stacked unseen in the same cell as the open one, so the block is as tall as the longest panel.
How does a screen reader hear the tiles?
Each tile with awards is named by its code, its country and its count ("US, United States, 3 awards"). The dashed tiles are decoration and the caption says how many countries have awards.
Related
- Pro
Globe Pins Awards
Filters and searchA drawn orthographic globe with six numbered pins beside an ordered list of awards by country; choosing a row marks its pin and names it under the globe.
- Pro
Regional Tabs Awards
Filters and searchUnderline tabs by region with a count on each, a local office line and two columns of local awards with a drawn mark, the programme, the country code and the year.
- Pro
Industry Coverage Matrix Awards
Lists and tablesA centred header and a table of six industries by four kinds of award, each cell a solid dot with its year or a hollow one, with counts per row and per column.
- Pro
Category Grid Awards
Cards and gridsSixteen awards sorted into six categories on a 3 by 2 hairline grid: a drawn glyph, a derived count and the two newest awards named in each cell, the largest category outlined.
- Pro
Dense Badge Wall Awards
Badges and sealsA wall of twelve drawn award badges on shared hairlines, four across, with a tally counted from the list and a show-all button on phones.
- Pro
Map Location Footer
Company and placesA visit-us footer for a coworking space: the address, visiting days and a transit, car or bike choice that swaps the directions and the route on a greyscale street map drawn in a framed figure.