Region picker

Pick a deployment region from a list with a map above it.

<GeoRegionPicker />· loading

Tryuse the arrow keys: Up and Down follow the list, Left and Right jump west or east on the map.

Installation

pnpm dlx shadcn@latest add @lumesec/geo-region-picker

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/geo-region-picker.json

Usage

geo-region-picker-example.tsx

import { GeoRegionPicker } from "@/components/lumesec/geo-region-picker";

export function Example() {
  return (
    <form>
      <GeoRegionPicker name="region" defaultValue="eu-west" from={{ lat: 40.4168, lon: -3.7038, label: "Madrid office" }} />
    </form>
  );
}

Pick a deployment region from a list with a map above it. The selection reticle travels to the new region along the great-circle path with a comet tail, and the land dots under it are magnified as it passes.

Give it a from location and every region shows an estimated round trip, with a dotted line from that location to the region you point at. It submits with forms through a hidden input.