Get Started

An SVG world map for shadcn/ui that highlights the countries you've been to, pins cities on top, and counts how much of the world you've seen. No tiles, no API keys, and it renders in Server Components.

Prerequisite

The component is installed with the shadcn CLI, so your project needs shadcn/ui set up with Tailwind CSS v4.

Installation

npx shadcn@latest add @visited-map/visited-map

This adds components/visited-map.tsx and installs d3-geo, topojson-client and world-atlas.

Usage

import {
  VisitedMap,
  type VisitedMapCountries,
  type VisitedMapPlace,
} from "@/components/visited-map"

const countries: VisitedMapCountries = {
  current: "AR",
  lived: ["IT"],
  visited: ["BR", "JP", "US"],
  wishlist: ["AU"],
}

// Cities or any other point. coords are [lng, lat], not [lat, lng]
const places: VisitedMapPlace[] = [
  { name: "Barcelona", coords: [2.17, 41.39], country: "ES" },
]

<VisitedMap countries={countries} places={places} className="max-w-3xl" />

If a country shows up more than once, the strongest status wins: current, then lived, visited and wishlist. See every option in the API reference, or build your countries and places by clicking instead of typing codes.