A slowly turning globe of dots with pulsing markers. Drag or use the arrow keys to spin it.
pnpm dlx shadcn@latest add @latheui/dotted-globePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Dotted Globe is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native div attributes. It is square and fills its width; size it with className.
| Prop | Type | Default | Description |
|---|---|---|---|
| label* (required) | string | — | Accessible name. |
| markers | { lat: number; lng: number; label?: string }[] | — | Places to mark, in degrees. |
| speed | number | 6 | Target degrees per second. Speed changes ease smoothly without restarting the canvas; 0 brings it to rest. |
| initialRotation | [lng: number, lat: number] | [-20, 18] | The point facing the viewer at first. |
| markerColor | string | "var(--chart-1)" | Color of the markers. |
| dotSize | number | 2.2 | Dot diameter in pixels. |
| dotCount | number | 12000 | Evenly distributed surface samples, including hidden ocean points. Clamped to 1,000–50,000. More points give closer spacing. |
| landColor | string | inherited text color | Base color of land dots. Accepts any CSS color. |
| countryColors | Record<string, string> | — | Colors keyed by country ID from globeCountries in the world-countries library (ISO numeric strings where available, e.g. 250 for France). |
| showOcean | boolean | false | Draw dots over water as well as land. |
| oceanColor | string | "var(--muted-foreground)" | Color of ocean dots. |
| waterColor | string | "transparent" | Fill of the sphere behind the dots. |
| showOutline | boolean | true | Draw a fine outline around the sphere. |
| interactive | boolean | true | Allows dragging and the arrow keys. |
<DottedGlobe
label="A connected world"
className="max-w-lg"
dotCount={24000}
dotSize={1.8}
landColor="#6ee7b7"
showOcean
oceanColor="#31566b"
waterColor="#0b1422"
countryColors={{ "250": "#fbbf24", "840": "#60a5fa" }}
/><DottedGlobe
label="Asia-Pacific"
className="max-w-md text-chart-2"
initialRotation={[120, 10]}
speed={3}
markerColor="var(--chart-3)"
markers={regions}
/>