shadcnmaps

Overview

shadcnmaps is an open-source collection of 170+ interactive SVG map components for React, built for the shadcn/ui registry by LGLabGreg. Maps are pure React and SVG with Tailwind CSS styling and no mapping library dependencies, and each map installs separately through the shadcn CLI, so a project only pulls in the geography it needs.

The registry has a shared map UI component plus a component and a data file for every map: countries, continents, world maps, all US states, and regional sets such as the European Union, Middle East, London boroughs, New York City boroughs and French departements. Colors are set with CSS variables, and light and dark mode are supported.

Features

• 170+ maps: Countries, continents, US states and regional collections, including world and US territories maps
• Interactions: Click, hover and region selection with tooltips
• Keyboard navigation: Regions can be reached and selected from the keyboard
• Custom markers: Place markers using SVG coordinates
• Map controls: Built-in zoom and pan
• Theming: CSS variables for every color, with light and dark mode
• No dependencies: Pure React SVG components, installed one map at a time

Tech stack

• React, SVG, Tailwind CSS, shadcn CLI

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @shadcnmaps/component-name