RegionCard

Floating server-info chip — region name, mono id, and a color-coded ping line.

RegionCard is the server-info chip that floats over region visualizations: an uppercase kicker, the region name, and a mono line with the region id plus a color-coded ping: x ms (green under 80 ms, amber under 180, red past that — the same pingTone helper the whole region family shares). It ships unpositioned; anchor it with className over a RegionSelect map, a RegionGlobe, or the CreateProject block — all three use this exact component.

Install

npx shadcn@latest add https://ui.neon.com/r/region-card.json

Usage

import { RegionCard } from "@/components/neon-ui/region-card";

<RegionCard
  className="absolute bottom-3 left-3"
  title="AWS Europe Central 1 (Frankfurt)"
  regionId="aws-eu-central-1"
/>;

ping is optional; add it to get the color-coded latency line. It is a browser measurement rather than API data, so it comes from the standalone useRegionPing hook.

Wiring to Neon

The card is one region’s readout, so it takes a single entry off the active-regions list:

import { createNeonClient } from "@/lib/neon-client";

const neon = createNeonClient(process.env.NEON_API_KEY);
const { data } = await neon.regions.list();
const region = data?.find((item) => item.region_id === regionId);

<RegionCard title={region.name} regionId={region.region_id} />;

Showing a ping

Latency is measured in the browser, not reported by the API. The hook that measures it is its own registry item, so the card does not drag another component in:

npx shadcn@latest add https://ui.neon.com/r/use-region-ping.json

"use client";

import { useRegionPing } from "@/hooks/use-region-ping";

const { pings } = useRegionPing({
  "aws-us-east-1": "https://us-east-1.aws.example.com/health",
});

<RegionCard
  title="AWS US East 1 (N. Virginia)"
  regionId="aws-us-east-1"
  ping={pings["aws-us-east-1"] ?? null}
/>;

The hook takes a URL per region and times an opaque no-cors HEAD request against each. Until the first round-trip lands the entry is undefined, so pass null and the card leaves the line out rather than showing a placeholder number.

Props

Notes

• Exports pingTone(ping) — the shared green/amber/red class mapping — for readouts outside the card.
• The entrance fade is motion-reduce guarded; pair with an aria-live="polite" wrapper when the card announces selection changes.