shadcn.io is not affiliated with official shadcn/ui
Globe Pins Awards Block for Radix UI
A 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.
Installation
Overview
A globe of awards for React with Radix UI. A split behind a solid divider: at the start a title, a sentence, a tally counted from the list ("6 awards in 6 countries since 2022") and an ordered list of six awards, one per country, each row a number, the award and its programme, country and year. At the end a framed figure with a drawn orthographic globe: a disc with meridians and parallels as hairlines, computed from latitude and longitude, and six numbered pins. Focusing or choosing a row marks its pin with a solid fill and a ring and tints the row, and a caption under the globe names the country in words. The globe does not spin and there is no map library. On a phone the globe sits under the header at 220 px, above the list. The programmes and awards are made up for the example: replace AWARDS and its latitudes and longitudes with your own.
FAQ
How do I add or move a pin?
Edit AWARDS: each entry has a country, a lat and a lon in degrees, a programme, a title and a fixed year. The pin's place on the globe, its number and the header tally are all derived from that list. A place on the far side of the globe is not drawn, so move CENTRE if a pin disappears.
How is the globe drawn?
As inline SVG: a disc, meridians and parallels every 30 degrees traced point by point through an orthographic projection at the top of the file, and pins as plain elements placed by percentage. There are no images, tiles or libraries.
How do the rows work from the keyboard?
Each row title is a real button, so Tab walks the list; focusing a row marks its pin, and Enter or Space (or a tap) does the same. The pressed row is announced with its pin number and country.
Is the globe the only way to read the awards?
No. The globe is a drawing hidden from assistive technology; every award, country and year is in the list, and the caption under the globe repeats which pin is marked.