AtlasKit
An interactive SVG world map for React.
- Role
- Creator
- Type
- Solo
- Year
- 2025
- Status
- Open source
- Category
- Languages and Libraries
- Main stack
- React, TypeScript +1
Overview
AtlasKit is an npm package that drops an interactive world map into any React app. It ships as @justphemi/atlas-kit with full TypeScript types, 154 countries you can reference by ISO code or by name, and no map tile servers: the map is pure SVG, around 180KB and tree shakeable.
You can fill the map with a flat colour, a static gradient or a smoothly animated gradient. Markers can pulse, bounce or fade in, carry their own colours and data, and show tooltips with a custom renderer. Click and hover callbacks make it easy to build things like a sidebar for the selected country.
It is accessible out of the box, with ARIA roles, labels and keyboard support, and it builds to both ESM and CommonJS. The playground below runs the real published package, so what you tweak is exactly what you would get from npm install.
Highlights
- •154 countries by ISO code or full name.
- •Flat, linear and animated SVG gradient fills.
- •Pulse, bounce and fade in marker animations, set globally or per marker.
- •Tooltips with a custom renderer, plus click and hover events.
- •ARIA roles and keyboard support, with ESM, CJS and TypeScript types.
Try it
Fill
Marker animation
Markers
Click a marker on the map to see the click event.
Your code
<AtlasKit
markers={[
{ country: "NG", size: 6 },
{ country: "US", size: 6 },
{ country: "JP", size: 6 },
{ country: "BR", size: 6 },
]}
mapStyle={{ fill: { type: "animated", colors: ["#1e1b4b","#312e81","#4338ca","#312e81"], animationDuration: 9 }, }}
defaultAnimation={{ type: "pulse" }}
showTooltip={true}
/>Built with
- React
- TypeScript
- Vite
