A dotted globe with arcs that draw between cities; drag to turn it, or click a city to bring it to the front.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/globe-arcs
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { GlobeArcs } from "@/components/nextui/globe-arcs";23export function Network() {4return (5<GlobeArcs6className="text-muted-foreground"7cities={[8{ name: "Frankfurt", lat: 50.11, lng: 8.68 },9{ name: "Dubai", lat: 25.2, lng: 55.27 },10{ name: "Singapore", lat: 1.35, lng: 103.82 },11]}12routes={[13["Frankfurt", "Dubai"],14["Dubai", "Singapore"],15]}16focus="Dubai"17/>18);19}
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 420 | Width and height of the globe, in px; it shrinks to fit narrower containers |
| cities | { name: string; lat: number; lng: number }[] | – | Points on the globe, each with a label; defaults to eight cities across Europe, Africa, Asia and the US |
| routes | [string, string][] | – | Arcs to animate, as pairs of city names |
| focus | string | "Dubai" | City the globe turns to face first |
| speed | number | 4 | Spin speed in degrees per second while idle; 0 stops it |
| interactive | boolean | true | Drag to rotate, click a label to turn to that city |
| accent | string | "var(--foreground)" | Color of the arcs and markers; any CSS color |
| label | string | "Globe with animated routes between cities" | Description read by screen readers |
| className | string | – | Extra class on the root; a text color class sets the dot color |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.