Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Tile Map Awards Block for Vue

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A tile map of awards for Vue with Ark 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.

Does the map mirror in a right-to-left layout?

No, on purpose: a map is not mirrored, so the tile group is kept left to right. The header and the panel follow the page direction.

Is this a real map, and are the awards real?

The arrangement is a simplified sketch of where countries sit, drawn by the block with no map library. The countries are real places named in text; the programmes, awards and product are made up.

All 137 awards blocks