Guide · Open source
How to use mapcn: install, add map components and tips
Updated · written with AI from the project's own documentation and checked against our catalogue data
mapcn is a free, open-source collection of ready-to-use map components for React, built on MapLibre GL and styled with Tailwind so they fit in with shadcn/ui. This guide explains what it is, what you need before starting, how to get the code, which components it offers, and the basemap terms you must check before shipping. By the end you will know whether mapcn fits your React project and where to go next.
mapcnAnmolSaini16/mapcn · ★ 12.4k · MIT Install options & downloads Quick start
- 1Check prerequisites. Make sure Node.js is installed and you have a React project to work in.
- 2Clone the repository. Run git clone https://github.com/AnmolSaini16/mapcn to get the source.
- 3Read the installation docs. Open mapcn.dev/docs/installation and follow the steps for adding components to your React app.
- 4Add a basic map. Use the basic map component from the components docs at mapcn.dev/docs/basic-map.
- 5Add markers, popups or routes. Layer in the markers, popups, routes or controls you need, since they are designed to be composed.
- 6Review basemap terms. Check CARTO's terms and attribution rules, and configure your own provider or API key before production.
What mapcn is and who it is for
mapcn is a set of pre-built map components for React apps. It wraps MapLibre GL, a mapping library, so you do not have to write mapping code from scratch. The README says it aims for zero configuration and a single-command setup, and that its components adapt to light and dark mode.
It suits React developers who want an interactive map quickly, teams already using shadcn/ui or Tailwind, and prototypes that need a free, MIT-licensed map component. It is not meant for non-React projects, because the README describes the components as React components.
- Good fit: React projects that need markers, popups, routes or map controls
- Good fit: teams that already use shadcn/ui or Tailwind
- Poor fit: non-React projects
- Check carefully: production apps that will not configure their own map provider
What you need before you start
The README lists two prerequisites: Node.js and an existing React project. If you do not yet have a React project, create one first, then bring mapcn into it.
- Node.js installed
- An existing React project
Get the mapcn code
The install method in the source is a git clone of the repository. The README also points to a documentation site at mapcn.dev/docs, which has an installation page at mapcn.dev/docs/installation. Follow the current steps there for adding components to your app, since the README itself only shows the clone command.
Cloning the repository is the step the README gives explicitly:
git clone https://github.com/AnmolSaini16/mapcnKnow what components you get
The README's feature list covers the main building blocks. Components are composable, so you combine them to build more complex map interfaces.
- Basic map and theme-aware styling (light and dark mode)
- Markers and popups, including tooltips and labels
- Routes and paths drawn on the map
- Controls: zoom, compass, locate and fullscreen
- Full access to MapLibre GL's capabilities when you need them
Understand the basemap terms before shipping
The default styles and examples use CARTO Basemaps, which are powered by OpenStreetMap data. CARTO offers free tiers for commercial and non-commercial use, limited by monthly tile requests, and attribution must stay visible. The README lists 1 million tile requests per month for commercial use and 5 million for non-commercial use. CARTO also requires API keys for raster basemaps and may extend this to vector basemaps.
For production applications, review CARTO's terms and configure your own basemap provider or API key. mapcn is built on MapLibre and supports alternative MapLibre-compatible basemap providers.
- Keep CARTO and OpenStreetMap attribution visible
- Check the current CARTO terms before launch
- Plan your own basemap provider or API key for production
Find more help and contribute
Documentation is at mapcn.dev/docs, with a skill guide at mapcn.dev/docs/skill. The README also lists an agent skill you can add to coding agents such as Claude Code, Cursor or Codex. To contribute, fork the repository, create a feature branch, commit, push and open a Pull Request.
npx skills add AnmolSaini16/mapcnWhat people use it for
- A React dashboard that shows locations with markers and popups
- A shadcn/ui-based app that needs a map matching its existing look
- A prototype that draws routes or paths between points
- A product page with zoom, compass and fullscreen controls
Frequently asked questions
Is mapcn free to use?
mapcn is free and open source under the MIT License. The map tiles it uses by default come from CARTO, which has its own free tiers with monthly tile request limits and attribution requirements.
What are the requirements for mapcn?
The README lists Node.js and a React project as prerequisites. mapcn is described as a set of React components, so it is intended for React apps only.
How do I install mapcn?
The README shows a git clone of the repository at github.com/AnmolSaini16/mapcn. The installation steps are on mapcn.dev/docs/installation, so follow those for adding components to your app.
Can I use mapcn in production?
The README warns that the default styles rely on CARTO's free tiers with limits and attribution requirements. For production, review CARTO's terms and configure your own basemap provider or API key.
What are the alternatives to mapcn?
The project's comparable projects are react-map-gl, react-leaflet and Leaflet. mapcn differs by providing pre-built components styled with Tailwind to match shadcn/ui.
Does mapcn work with Tailwind and shadcn/ui?
Yes. The README says it is styled with Tailwind and works with shadcn/ui, using the same patterns and styling conventions.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
mapcn suits React developers, especially those using shadcn/ui or Tailwind, who want a free, MIT-licensed map with markers, routes and controls quickly. It is a weaker choice for non-React projects, or for production apps that cannot meet CARTO's terms and do not plan to configure their own basemap provider; in those cases consider react-map-gl, react-leaflet or Leaflet.
Install options & downloads