Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Region Picker Map Logos Block for React

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

  • Pro

    Dot Grid Map Logos

    Maps and lists

    A world map for a freight-forwarding tool, drawn as a grid of dots in a framed figure, with six customer pins at their cities and one chip per region carrying its customer count.

  • Pro

    Regional Tabs Logos

    Maps and lists

    Customers of a candle-subscription service by region: four tabs with counts switch a two-column list, each cell a wordmark with its city and country.

  • Pro

    Regional Breakdown Rows Logos

    Maps and lists

    Customers of a land-registry product in four rows, one per region: a label cell with the region, its team count and a thin share bar, then the region's four wordmarks past a hairline.

  • Pro

    World Map Pin Overlay Features

    Diagrams and maps

    A dot-grid world map with a numbered pin on each of six regions, where choosing a region from the list under it rings its pin and rolls the edge locations, latency and uptime to that region.

  • Pro

    Metric Split Logos

    Metrics

    An oversized figure and two buttons at the start, a column of six customer wordmarks at the end past a divider, for a dependency-graph product.

  • Pro

    Split Headline Grid Logos

    Splits

    A headline, one sentence, a Shine Button and an outline button at the start, and six customers in a hairline grid at the end, three across and two down.

All 100 logos blocks