Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Data Residency Onboarding Block for Radix UI

A region step with a dotted world map and four pins as radios (US East, EU West, Asia Pacific, Australia); the chosen region shows its city, a typed latency from your office and what it commits to.

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

Let a new organisation say where its data lives before anything is stored, with this region step for React with Radix UI. It is a whole screen of Orrerywick, a video-meeting service for schools: the page's rails and one band across it, split in two under the step header and heading. The map is drawn from a typed grid of dots, with four region pins that are native radios: US East, EU West, Asia Pacific and Australia. The panel beside it gives the chosen region's city, its latency "from your office" and a list of what it commits to, each with a tick ("Data stays in Frankfurt", "GDPR processing terms apply"). Use EU West (the name follows the choice) is the one Shine Button.

FAQ

How is the map drawn?

From a 72 by 36 grid of characters in the file, a # for land and a . for sea. Every land cell becomes one dot in a single SVG path, so it scales with the width, costs no image and is hidden from assistive technology. The pins are placed by longitude and latitude as percentages of the map. To change the map, edit the grid.

How do the pins work without a mouse?

They are native radios in one group named Region: Tab reaches the chosen pin and the arrow keys move between regions and pick the one they reach, with a visible ring on the focused pin. The panel under the map is a labelled section whose heading is the region's name.

What changes on a phone?

The map comes first at 2 to 1, and only the chosen pin carries its name, since four names would overlap at that width. The panel follows it, and Use EU West stays pinned to the bottom of the screen.

Are the latencies and commitments real?

No: they are typed example figures, marked as such on the panel. In your app measure latency from the visitor's own network, and write each region's commitments from the terms you actually offer.

Why does the map stay left to right in an Arabic or Hebrew page?

A map is a picture of the world, not text, so mirroring it would put the continents in the wrong place. The rest of the page follows the page direction.

What stays local in the demo, and how do I wire it?

Everything: choosing and pressing the button only change state and the status says "Nothing was provisioned." In your app create or move the workspace in that region where choose says so, and make clear that moving data later may take time.

All 100 onboarding blocks