Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Region Picker Map Logos Block for Ark UI

A 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.

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 region picker with a map for React with Ark UI. At the start, a header and a picker of four regions (Americas, Europe, Middle East and Africa, Asia Pacific), each option with its team count; at the end of a divider that meets the page's top rule at a + mark, a framed world map drawn as a grid of dots, and under it the chosen region's name with two figures. Choosing a region lights its land (the rest dims) and rolls the figures, labels printed a day and carriers connected, to that region's values. A region is always chosen, the Americas to begin with, and choosing the one already chosen keeps it. The map is a bitmap at the top of the file with each dot assigned to a region from its longitude and latitude, drawn as one SVG path per region. On a phone the picker is two by two and the map comes under it. Built from Toggle Group, Sliding Number and Guides, with CSS for the entrance and the colour change.

FAQ

How do I change the regions and their figures?

Edit REGIONS: each is an id, a name, its teams, labels (thousands a day) and carriers. The header's total is summed from the teams, so it follows. To move land between regions, change regionOf, which decides from a dot's longitude and latitude which region it belongs to (Americas west of 30 degrees west, Asia Pacific east of 62 degrees east, Europe north of 36 degrees north between them, the rest Middle East and Africa).

How does the picker work with a keyboard?

The picker is one tab stop. The left and right arrow keys move between the regions and Space or Enter chooses the one in focus; choosing the region already chosen keeps it. The chosen region's name and figures are in a polite live region, so a screen reader announces the change.

Is the map decoration?

Yes. It is hidden from assistive technology and has no focusable parts: the picker is the control and the figures are the content, so everything the map shows is also said in text. It keeps west on the same side in a right-to-left layout, because geography doesn't mirror.

Why do the figures roll?

Each value is a Sliding Number: when the region changes, the digits that changed roll to their new values. The figures are wrapped in bdi so the unit stays beside the number in a right-to-left layout. With reduced motion the numbers change in place.

How does it fit on a phone?

The picker becomes a two by two grid, and the map and the two figures follow it, with a hairline between the parts. Nothing scrolls sideways at 320 pixels.

All 100 logos blocks