Beautiful map components. 100% Free, Zero config, one command setup.
Overview
Free & open-source, ready-to-use, customizable map components for React. Zero config. One command setup. Built on MapLibre GL , styled with Tailwind , works seamlessly with shadcn/ui . - 🎨 — Automatically adapts to light/dark mode - 🎯 — Works out of the box with sensible defaults - 📦 — Uses the same patterns and styling conventions - 🗺️ — Full access to MapLibre's powerful mapping capabilities - 🧩 — Build complex map UIs with simple, declarative components - 📍 — Rich marker system with popups, tooltips, and labels - 🛤️ — Draw routes and paths on your maps - 🎮 — Zoom, compass, locate, and fullscreen controls Teach your coding agent (Claude Code, Cursor, Codex, …) how to use mapcn: Then ask for a map, or ask where one would fit in your app. See mapcn.dev/docs/skill. This project uses CARTO Basemaps which are based on OpenStreetMap data. - : Requires a CARTO Enterprise license. Request a demo for pricing details. - : Free for CARTO grantees under their basemap terms.
README
mapcn
Free & open-source, ready-to-use, customizable map components for React. Zero config. One command setup. Built on MapLibre GL, styled with Tailwind, works seamlessly with shadcn/ui.
Get Started · Installation · Components
Features
- 🎨 Theme-aware — Automatically adapts to light/dark mode
- 🎯 Zero config — Works out of the box with sensible defaults
- 📦 shadcn/ui compatible — Uses the same patterns and styling conventions
- 🗺️ MapLibre GL powered — Full access to MapLibre’s powerful mapping capabilities
- 🧩 Composable — Build complex map UIs with simple, declarative components
- 📍 Markers & Popups — Rich marker system with popups, tooltips, and labels
- 🛤️ Routes — Draw routes and paths on your maps
- 🎮 Controls — Zoom, compass, locate, and fullscreen controls
Agent Skill
Teach your coding agent (Claude Code, Cursor, Codex, …) how to use mapcn:
npx skills add AnmolSaini16/mapcn
Then ask for a map, or ask where one would fit in your app. See mapcn.dev/docs/skill.
Basemap Terms of Service
This project uses CARTO Basemaps which are based on OpenStreetMap data.
- Commercial use: Requires a CARTO Enterprise license. Request a demo for pricing details.
- Non-commercial use: Free for CARTO grantees under their basemap terms.
- Alternative: You can switch to OpenStreetMap tiles or any other MapLibre-compatible tile provider (MapTiler, Stadia Maps, etc).
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
MIT License - see the LICENSE file for details.
Recommended Tools
Try a different keyword or remove a filter.
Install
npx skillfish add anmolsaini16/mapcn