shadcn.io is not affiliated with official shadcn/ui
Regional Tabs Awards Block for Radix UI
Underline 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.
Installation
Overview
A regional awards block for React with Radix UI. A start-aligned header carries a tally counted from the list ("14 awards in 4 regions since 2022"), and under it a ruled band with + marks holds underline tabs for North America, Europe, Asia-Pacific and Latin America, each with its count. The open panel starts with a quiet line naming the local office in that region, then lists the local awards in two columns on shared hairlines: a small drawn mark in a frame, the award, its programme, the country as a two-letter code and the year. Arrow keys, Home and End move between tabs, and the block keeps the height of the longest panel. On a phone the tabs scroll sideways. The programmes, awards and offices are made up for the example: replace REGIONS with the recognition your product has actually received.
FAQ
How do I change the regions, the offices or the awards?
Edit REGIONS: each has an id, a label, an office line and its awards (a title, a programme, a country code, a fixed year and the shape of its drawn mark). The tab counts and the header tally are counted from the list.
Does the block change height between tabs?
No. Every panel is stacked unseen in the same grid cell as the open one, so the cell is as tall as the longest panel. The unseen copies are hidden from assistive technology and from the keyboard.
Which keys work?
Tab moves into the tab list and then to the open panel, the arrow keys move between tabs, and Home and End jump to the first and last. This is the library's own tab behaviour on every target.
Why are countries shown as two-letter codes?
They keep each row to one short line. The code is plain text in the row, and a screen reader reads it as part of the line, so nothing depends on a flag or a colour.