mapcn
Beautiful map components. 100% Free, Zero config, one command setup.
Ready-to-use React map components built on MapLibre GL that drop into any project with a single command, adding interactive maps with markers, routes, location controls, and light/dark mode support.
mapcn is a collection of pre-built map components for React applications. The goal is to make adding interactive maps to a web project as simple as running a single command, without any extra configuration steps. The components are free to use and open-source.
The library is built on top of MapLibre GL, a tool for rendering interactive, tile-based maps in the browser. Styling comes from Tailwind CSS, and the components follow the same conventions as shadcn/ui, a popular set of copy-paste React components. If your project already uses shadcn/ui, these map components drop in using the same patterns.
Feature-wise, the library covers what most apps need from a map. You can render a base map with standard controls for zooming, compass orientation, finding your current location, and going full-screen. The library also supports placing markers on the map with popups, tooltips, and labels, and you can draw routes or paths. Everything adapts automatically to light and dark color modes.
For map tile data, the project defaults to CARTO Basemaps, which are built on OpenStreetMap data. Non-commercial use is free under CARTO's terms. Commercial use requires a paid CARTO Enterprise license. Developers who need a different tile source can swap in any provider compatible with MapLibre, such as MapTiler, Stadia Maps, or raw OpenStreetMap tiles.
The project is MIT-licensed and accepts contributions via pull requests on GitHub.
Where it fits
- Add an interactive map with zoom, compass, and full-screen controls to a React app by installing a single package.
- Place markers with popups and tooltips on a map to show points of interest in a location-based web app.
- Draw routes or paths on a map to visualize directions or GPS tracking data in a React project.
- Swap the default CARTO tile source for MapTiler or Stadia Maps tiles to match your project's licensing needs.