IP lookup

A field that looks up where an IP address is located and shows the result on a small map.

<GeoIp />· loading

Trylook up 198.51.100.7, then 192.168.1.20.

Installation

pnpm dlx shadcn@latest add @lumesec/geo-ip

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-ip.json

Usage

geo-ip-example.tsx

"use client";

import { GeoIp, type GeoIpResult } from "@/components/lumesec/geo-ip";

async function resolve(address: string): Promise<GeoIpResult | null> {
  const response = await fetch(`/api/ip/${encodeURIComponent(address)}`);
  if (!response.ok) return null;
  const result: GeoIpResult = await response.json();
  return result;
}

export function Example() {
  return <GeoIp defaultValue="203.0.113.42" resolve={resolve} />;
}

A field that looks up where an IP address is located and shows the result on a small map. While the lookup runs, a crosshair hops from land dot to land dot and slows down like a slot machine before it locks onto the result.

The coordinates roll into place, and the place, network and accuracy appear below. Private and reserved addresses are answered at once without a lookup. Bring your own resolve function; the built-in one invents a location and is only for demos.