Skip to content
Get packs

mapcn

Ready-made React map components built on MapLibre GL and styled with Tailwind.

GitHub Download source
Stars
12.4k
Forks
724
Licence
MIT
Language
TypeScript
Last update
5 days ago
Type
Library

What it is

mapcn is a set of pre-built map components for React apps. It wraps MapLibre GL, a mapping library, and uses Tailwind styling so maps look like the shadcn/ui components many React developers already use. The README says it aims for zero configuration and a single-command setup, and that its components adapt to light and dark mode.

  • Show a map with markers and popups for store locations or points of interest
  • Draw routes or paths between locations on a map
  • Add zoom, compass, locate, and fullscreen controls to a map view
  • Build a map that switches between light and dark themes automatically

Great for

  • React developers who want an interactive map without writing mapping code from scratch
  • Teams already using shadcn/ui or Tailwind who want visual consistency
  • Developers who want markers, popups, routes, or map controls ready to drop in
  • Prototypes and projects that need a free, MIT-licensed map component

Not ideal for

  • Non-React projects, since the README describes the components as React components
  • Production apps that cannot meet CARTO's basemap terms or do not plan to configure their own map provider, because the default styles rely on CARTO's free tiers with usage limits and attribution requirements
Step-by-step guide: how to use mapcnInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    See the README

    You'll need: Node.js · A React project

    Clone the repository

    git clone https://github.com/AnmolSaini16/mapcn
  2. 2

    Run it

    • Read the installation guide at mapcn.dev/docs/installation
    • Add the mapcn components to your React project following the docs
    • Render a basic map component in one of your pages
    • Check that the map displays and that attribution is visible
  3. 3

    Get the most out of it

    • Use the agent skill (npx skills add AnmolSaini16/mapcn) so a coding agent can help place maps in your app
    • Add markers with popups, tooltips, and labels for richer map UIs
    • Use the route features to draw paths on the map
    • Configure your own basemap provider or API key before going to production, as the README recommends

Downloads

Source code (.zip)main branch · straight from GitHubOfficial website & docsmapcn.dev

Strengths

  • MIT licensed and free, with the README describing it as free and open source
  • Built on MapLibre GL, an established open-source mapping library
  • Works with shadcn/ui and Tailwind conventions, so it fits existing React UI code

Trade-offs

  • Default styles and examples use CARTO basemaps, which have monthly request limits and attribution requirements that you must follow
  • The README is short on details, so the full component API must be learned from the external docs site
  • Only React is mentioned, so it is not an option for other frameworks

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.