About
An interactive dot-matrix world map paired with an accessible dropdown for picking a server/datacenter region, with hover labels, a floating region info card, and optional latency display.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Region Select to your project and fits it to your theme.
Code
How Region Select is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { RegionSelect, type ServerRegion } from "@/components/ui/region-select";
const regions: ServerRegion[] = [
{
id: "aws-us-east-1",
name: "US East 1 (N. Virginia)",
provider: "AWS",
lat: 38.9,
lng: -77.5,
},
{
id: "aws-us-west-2",
name: "US West 2 (Oregon)",
provider: "AWS",
lat: 45.9,
lng: -119.7,
},
{
id: "aws-eu-central-1",
name: "Europe Central 1 (Frankfurt)",
provider: "AWS",
lat: 50.1,
lng: 8.7,
},
{
id: "aws-eu-west-2",
name: "Europe West 2 (London)",
provider: "AWS",
lat: 51.5,
lng: -0.1,
},
{
id: "aws-ap-southeast-1",
name: "Asia Pacific SE 1 (Singapore)",
provider: "AWS",
lat: 1.35,
lng: 103.8,
},
{
id: "aws-ap-northeast-1",
name: "Asia Pacific NE 1 (Tokyo)",
provider: "AWS",
lat: 35.7,
lng: 139.7,
},
{
id: "aws-sa-east-1",
name: "South America East 1 (São Paulo)",
provider: "AWS",
lat: -23.5,
lng: -46.6,
},
{
id: "aws-ap-south-1",
name: "Asia Pacific South 1 (Mumbai)",
provider: "AWS",
lat: 19.1,
lng: 72.9,
disabled: true,
},
];
export default function RegionSelectDemo() {
return (
<div className="w-full max-w-md">
<RegionSelect
defaultValue="aws-us-east-1"
regions={regions}
latencies={{
"aws-us-east-1": 24,
"aws-eu-central-1": 92,
"aws-ap-southeast-1": 210,
}}
/>
</div>
);
}
More by neondatabase
View all
DB Connection Card
Metric Card
Branch Tree
Input