mapcn: ready-to-use map components for React

Everything worth knowing about AnmolSaini16/mapcn: a shadcn-style registry of map components and blocks for React, built on MapLibre GL, styled with Tailwind, and designed for projects already using shadcn/ui. As of September 1, 2026 it carries 11,964 stars.

---

What mapcn is

mapcn is a shadcn-style registry of reusable map components and blocks for React. Its official description is “Beautiful map components. 100% Free, Zero config, one command setup.” It isn’t a model or a service — it’s UI components copied into the user’s project with a single command, following shadcn/ui’s same copy-based code distribution model.

It’s built on MapLibre GL, styled with Tailwind CSS, and designed to integrate with shadcn/ui. The README and the official llms.txt define it as “a free, open-source shadcn-style registry of ready-to-use map components and blocks for React.” The registry’s entry point is the index at https://mapcn.dev/r/registry.json.

At the time of this research, the registry exposes 9 items: one registry:ui type (the base map component) and eight registry:block types (analytics-map, choropleth, analytics-card, delivery-tracker, uptime-monitor, heatmap, logistics-network, and store-locator). Once installed, the base component exposes an API with Map, Controls, Markers, Popups, Routes, Arcs, GeoJSON, and Clusters.

Origin: from next-maps to the shadcn pattern

The repository was created on December 28, 2025 by Anmoldeep Singh (account AnmolSaini16), whose GitHub profile and personal blog anmoldeep.dev identify him as a design-focused software engineer, employed at Cloudflare on the “Design Engineering” team (account created September 30, 2020, 334 followers, 36 public repositories, X: @anmold_s).

His personal site lists mapcn as his main project under the tagline “Ready to use map components for React. Built on MapLibre. Styled with Tailwind,” alongside two other projects of his own: TableForge (table components, 28 stars) and Next Maps (452 stars). The latter is relevant to the story: it’s a “lightweight, clean, and beautifully designed” map component built with Next.js and Mapbox, and its author published a precursor article, “Building Modern Maps in Next.js with Mapbox” (April 2025). mapcn can be read as the evolution of that project: it moves from Mapbox to MapLibre GL and from a single component to shadcn’s registry pattern.

The verifiable public launch is the Hacker News submission 46459832 (“Mapcn: Beautiful Maps, Made Simple,” submitted by handfuloflight on January 2, 2026), whose link then pointed to https://mapcn.vercel.app (now mapcn.dev). The submission got 4 points and 0 comments.

Philosophy and principles

The README and documentation express a set of verifiable decisions:

• Zero config and one command: the component works “out of the box” with sensible defaults; everything installs via npx shadcn@latest add @mapcn/map.
• shadcn’s copy model: components are copied into the project (@/components/ui/map), not consumed as a closed dependency; the user owns the code and can modify it.
• Theme-aware: automatically adapts styling to light/dark mode, and background tiles switch between themes with no configuration.
• Composable: complex map interfaces are built with simple declarative components (Map, MapControls, markers, routes, etc.).
• MapLibre as the engine: gives access to MapLibre GL’s full capabilities; the component is an abstraction layer, not its own engine.
• Honesty about tile terms: the README dedicates a section to “Basemap Terms of Service,” warning that the default background tiles are CARTO Basemaps (based on OpenStreetMap data) and that commercial use requires a CARTO Enterprise license.

How it works

The documented usage flow is direct:

1. Install the base component: npx shadcn@latest add @mapcn/map. The command installs the piece and adds the component to the project.

2. Import and use: Map, MapControls, and the rest of the API are imported from @/components/ui/map.
3. Add blocks (optional): each block installs with its own command, e.g. npx shadcn@latest add @mapcn/choropleth.

llms.txt documents four background-selection (basemap) decisions that define behavior:

• <Map> with no blank → free default CARTO tiles (ideal for locators, delivery tracking, address maps).
• <Map blank> → a transparent canvas with no tiles; your own layers are added (GeoJSON, arcs, markers, clusters); ideal for choropleth, arc, point, and data-panel maps.
• <Map blank> + <MapGeoJSON data={WORLD_GEOJSON} /> → countries or borders only (a Natural Earth source is suggested, e.g. https://cdn.jsdelivr.net/gh/nvkelso/natural-earth-vector@v5.1.2/geojson/ne_110m_admin_0_countries.geojson).
• The styles property → a custom MapLibre-compatible style URL or object (MapTiler, OpenFreeMap, CARTO, or self-hosted); an explicit styles overrides blank.

Technical details documented in the installation guide: MapLibre parses tiles in a Web Worker distributed as a separate file, and mapcn loads it from unpkg pinned to the installed version. Under a strict CSP, the worker needs script-src 'self' https://unpkg.com; and worker-src 'self' blob:; to self-host it, maplibre-gl-worker.mjs and maplibre-gl-shared.mjs are copied into public/ and the unpkg URL in the component is replaced with MapLibreGL.setWorkerUrl("/maplibre-gl-worker.mjs").

Official and semi-official status

• Vercel OSS Program: the README carries the “Vercel OSS Program” badge, and the project’s launch site was served from mapcn.vercel.app. This places it within Vercel’s support program for open-source projects.
• shadcn ecosystem: mapcn isn’t a closed package but a registry consumed via the shadcn CLI (npx shadcn@latest add …). In practice it functions as an extension of the shadcn/ui component catalog, though there’s no evidence it’s listed in shadcn’s central registry or formally “certified” by a vendor.
• No formal designation: no vendor endorsement or de facto standard status exists in the sources consulted; it’s a one-person project with community traction (ports, videos, adoption in third-party projects) and enrollment in Vercel’s OSS program.

The ecosystem

Ports to other frameworks (independent)

Repository	Stars	Framework	Documented relationship
MariusLang/mapcn-svelte	203	Svelte	“Based on mapcn by Anmol Saini”; same tagline and pattern, with shadcn-svelte; site mapcn-svelte.dev. Created January 1, 2026.
ridemountainpig/flightcn	135	TypeScript	A visualization set “built for the mapcn ecosystem”: airfields, great-circle routes, live tracking, weighted networks, satellite orbits. Created April 1, 2026.
aikenahac/mapcn-react-native	60	TypeScript	A React Native port (“Beautiful maps, made simple”). Created January 6, 2026.
craigderington/netops	56	TypeScript	“A network topology visualizer powered by mapcn and react.” Created January 12, 2026.
kwasii1/livewire-mapcn	24	JavaScript	A Laravel package inspired by mapcn for Livewire projects. Created February 24, 2026.

Minor ports and forks (GitHub repository search)

Beyond the above, a search for the name mapcn returned several small-scale ports: mapcn-vue (a Vue version, with forks by AdeoluAdeyemi at 8 stars, bogdan-mihalcea at 1, and repos by AnoRebel and SoftCodefr), ng-mapcn (juanvieiraprado99, 4 stars, Angular), mapcn_flutter (zietahmed19, 3 stars), Beautiful-Places-Mapcn (AndreaEmmi, 5 stars), and SaluSL/vue-mapcn (0 stars). These are unofficial ports; they don’t represent an affiliation or support from the author.

The author’s neighboring tools

• AnmolSaini16/next-maps (452 stars): the same author’s Mapbox precursor, which mapcn splits from by migrating to MapLibre and the shadcn pattern.
• AnmolSaini16/table-forge (28 stars): table components by the same author, with the same copy-based distribution style.

These figures come from the GitHub API and repository search performed during this research; they aren’t a quality, support, or compatibility audit of each derivative.

Repo numbers

Measured: September 1, 2026, GitHub API.

Metric	Value
Stars	11,964
Forks	701
Subscribers	44
Commits	110
Open issues per API	23
Primary language	TypeScript
License	MIT
Created	December 28, 2025
Last push	August 16, 2026
Last metadata refresh	September 1, 2026
Releases	None published (empty endpoint)

Top contributors returned by the API, by contribution count: AnmolSaini16 (108), jabahm (1), and jamnxdev (1); activity is heavily concentrated in the author.

API caveats: open_issues_count (23) may include open pull requests; a direct query shows 23 open items, of which 8 are PRs and 15 are issues. The general response’s watchers_count mirrors the star count (11,964), which is why subscribers_count (44) is reported separately as the real subscriber figure. The 110-commit count was obtained from the final page of the commits API’s pagination link. There are no releases in the releases endpoint, so versioning is handled through the shadcn registry and the package, not release tags.

How to contribute

The README documents a standard flow:

1. Fork the repository.
2. Create a feature branch: git checkout -b feature/amazing-feature.
3. Commit the changes: git commit -m 'Add some amazing feature'.
4. Push: git push origin feature/amazing-feature.
5. Open a pull request.

No CONTRIBUTING.md with a more detailed process, nor a testing/evaluation harness, was found; the above is the contribution guide. The issue history shows community PRs and suggestions following this flow, for example adding a great-circle mode for arcs (PR #73), fixing iOS Safari fullscreen (PR #70), and improving styleEpoch styling (PR #69).

Community reception

The retrieved evidence shows real adoption in third-party projects, active YouTube presence, and a concrete, measurable criticism:

Hacker News:

• The launch submission 46459832 got 4 points and 0 comments (January 2, 2026).
• In Show HN 47394458 (“Show HN: Situation Monitor,” zarathustra333, March 16, 2026, 2 points), the author states “Tech Stack: MapCN, NextJS, x API, AI SDK” — real adoption in a downstream tool, not a review of the project.
• The most concrete criticism appears in Show HN 48737302 (“I made a heatmap of 3400 VCs who are open to cold emails,” west_subject, June 30, 2026, 25 points). In the comments, west_subject themselves said they used mapcn to generate the pins and that “when I plotted 300 points, the spacing broke. Just the spacing; everything else works”; user baddash replied “xD I think it’s a really good tool.” It’s a real objection about clustering/spacing at ~300 points, paired with praise.

Community issues and requests (GitHub):

• Clustering with dense points: a request for custom rendering of points within clusters (#28, #29).
• Camera controls: a request to add pitch and bearing to <MapControl /> (#41, PR #42).
• Animated routes: a request for animated route playback (#10, PR #23).
• Compatibility: a request for Swift/iOS support (#12) and an iOS Safari fullscreen bug (#51, fixed in PR #70).
• Maintainability: engineering work to break down the monolithic Map component into reusable pieces (#11), coordinate encoding/decoding (#37), and using useSyncExternalStore where applicable (#38).
• Distribution: a request for manual installation instructions instead of shadcn-only (#25), respecting components.json (#81), adding a changelog (#79), and hardening the ESLint configuration (#80).

Video (YouTube search, September 1, 2026): mapcn has a verifiable YouTube audience: “Add Interactive Maps to React Easily” from channel Cand Dev (15,011 views, ~7 months), “mapcn: Beautiful Map Components for React (shadcn-style)” from Prism Labs (479 views, ~3 months), and “mapcn Review: The shadcn/ui of React Maps?” from TechWealth Hub (29 views, ~8 days). Also “Build a Coffee Finder App with mapcn + OpenStreetMap (100% Free)” from Cand Dev, and several Shorts (“mapcn | Beautiful Map Components,” 2.1K views; “Work faster with mapcn! | #GitHubGems #XerobiLab,” 214 views). Syntax’s Short “FREE maps for any app - replace Google maps TODAY” (124,715 views) covers MapLibre/OpenFreeMap generally and isn’t a mapcn-specific review; it’s cited only as MapLibre-ecosystem context.

No verifiable evidence was found on Reddit (the site returned no accessible content), on X/Twitter (navigation blocked), or on Product Hunt (Cloudflare challenge); accordingly, no metrics from those platforms are asserted.

mapcn vs. other approaches

Approach	Stars (GitHub API, Sept 1, 2026)	Verifiable difference
visgl/react-map-gl (8,497)	A React wrapper for Mapbox GL JS.	react-map-gl is a component library over Mapbox GL; mapcn is a shadcn-style registry over MapLibre GL with ready-made data blocks and the copy model.
PaulLeCam/react-leaflet (5,597)	React components for Leaflet maps.	react-leaflet uses Leaflet as its engine; mapcn uses MapLibre GL and installs via the shadcn CLI.
tomchentw/react-google-maps (4,627)	React integration for Google Maps.	react-google-maps depends on the Google Maps API (and its fees); mapcn focuses on MapLibre and free CARTO/OSM tiles.
AnmolSaini16/next-maps (452)	A lightweight Next.js map with Mapbox.	It’s the same author’s precursor, focused on Mapbox and a single component; mapcn migrates to MapLibre and the shadcn registry pattern with blocks.
shadcn-ui/ui (122,714)	A copy-based component distribution platform.	mapcn isn’t a competitor but a registry mimicking shadcn/ui’s distribution model for the maps domain.

The most useful comparison isn’t by popularity: mapcn stands out when you want a “designed” map that integrates frictionlessly into a project already using shadcn/ui and MapLibre. react-map-gl, react-leaflet, or react-google-maps are preferable when you need the specific engine or provider each one wraps.

Quick-start guide

Installation and first run

Prerequisites: a project with Tailwind CSS and shadcn/ui already configured.

npx shadcn@latest add @mapcn/map

(the docs also show pnpm dlx shadcn@latest add @mapcn/map). This adds the map component to the project. It’s then imported from @/components/ui/map:

import { Map, MapControls } from "@/components/ui/map";

export function MyMap() {
  return (
    <div className="h-[320px] overflow-hidden rounded-lg">
      <Map center={[-74.006, 40.7128]} zoom={11}>
        <MapControls />
      </Map>
    </div>
  );
}

On first run, the map defaults to the free CARTO tiles and automatically switches between light and dark themes. The MapLibre worker loads from unpkg pinned to the installed version, with no additional configuration.

Common workflows

• Base map with controls: <Map center zoom> + <MapControls />; the result is an interactive map with zoom, compass, geolocation, and fullscreen.

• Data map (choropleth): install the block with npx shadcn@latest add @mapcn/choropleth and use <Map blank> with <MapGeoJSON> so the data defines the geography.
• Country borders only: <Map blank> + <MapGeoJSON data={WORLD_GEOJSON} /> (a Natural Earth source is suggested).
• Ready-made product blocks: store locator, delivery tracker, uptime monitor, heatmap, or logistics network, each with its own npx shadcn@latest add @mapcn/<block> command.

Essential configuration

• center and zoom on <Map> — initial position ([lng, lat] array) and zoom level.
• blank on <Map> — a transparent canvas with no background tiles (your own layers are added).
• styles on <Map> — a custom MapLibre style URL or object (MapTiler, OpenFreeMap, CARTO, self-hosted); overrides blank.
• The Web Worker URL — defaults to unpkg; under a strict CSP it’s self-hosted by copying the .mjs files to public/ and calling MapLibreGL.setWorkerUrl(...).
• Tile provider — CARTO by default; can be switched to OpenStreetMap tiles or another MapLibre-compatible provider.

Common pitfalls and fixes

Per the README, issues, and community threads:

• Commercial use of the tiles: the default CARTO Basemaps require a CARTO Enterprise license for commercial use (free for CARTO grantees). For commercial production, switching to OpenStreetMap tiles or another provider (MapTiler, Stadia) is recommended.
• Spacing at ~300 points: in Show HN 48737302, a user reported that after plotting 300 points, cluster spacing broke down (everything else worked). It’s a documented limitation with dense data; there are open requests for custom cluster rendering (#28, #29).
• The mapcn name on npm is “stolen”: the npm registry has a mapcn package v0.0.1 (created May 14, 2026) whose description literally reads “npm package name robbery.” It’s not the real project: mapcn is distributed via the shadcn registry (add @mapcn/map), not as a normal npm dependency. Don’t npm install mapcn.
• Strict CSP: the MapLibre worker needs explicit script-src and worker-src entries, or it must be self-hosted from public/.
• iOS Safari fullscreen: a reported bug (#51) fixed in PR #70; using an older version may not work on iPhone.
• Monolithic component: there’s an engineering issue (#11) to break Map into reusable pieces; the base API is still a large component.

Integrations and migration

• With shadcn/ui: components and blocks are copied into the project, so they integrate with any app already using shadcn; no closed dependency is added.
• With MapLibre tile providers: MapTiler, Stadia Maps, OpenFreeMap, OpenStreetMap, or self-hosted styles, via the styles property or by changing the default background.
• Migration from react-map-gl, react-leaflet, or react-google-maps: no documented converter exists; since the engine changes (Mapbox GL / Leaflet / Google → MapLibre), views are reimplemented, though layer capabilities (markers, clusters, GeoJSON, routes) are equivalent. From the author’s own next-maps, the change is from Mapbox to MapLibre and from a component to a registry.
• Migration from a manual MapLibre map: mapcn wraps the same engine; the step consists of replacing manual MapLibre instance initialization with the <Map>/<MapControls> components.

Use cases

• Product teams already using shadcn/ui who need a map: install a “designed” map with one command, without setting up the MapLibre integration or tile management from scratch; the copy pattern keeps the code in the project.
• Developers building locators, delivery trackers, logistics dashboards, or uptime panels: the store-locator, delivery-tracker, logistics-network, uptime-monitor, and heatmap blocks offer ready-to-adapt data views, reducing UI design work.
• Geospatial data visualization projects: <Map blank> mode with MapGeoJSON, arcs, and clusters enables choropleth, flow, and point maps where the data — not the tiles — defines the geography, with free CARTO/OSM tiles for non-commercial use.
• Teams wanting to escape Google Maps fees: by relying on MapLibre GL and CARTO/OSM tiles, it offers a free or low-cost path for non-commercial use, always keeping in mind tile terms of use for commercial production.
• Communities in other frameworks: the mapcn-svelte, mapcn-react-native, livewire-mapcn ports, the Vue ports, and flightcn extend the pattern beyond React, useful for teams sharing the same map style across different stacks.
• People evaluating map components for React: the base component, documentation (llms.txt, API Reference), and example blocks serve as a reference for the shadcn pattern applied to maps.

Resources

• Repository: https://github.com/AnmolSaini16/mapcn
• Official site and documentation: https://mapcn.dev (docs: https://mapcn.dev/docs)
• Official llms.txt (for AI agents): https://mapcn.dev/llms.txt
• shadcn registry index: https://mapcn.dev/r/registry.json
• Installation: https://mapcn.dev/docs/installation
• Author’s blog (anmoldeep.dev, with the precursor article on Next.js maps): https://anmoldeep.dev
• Hacker News launch (4 points, 0 comments): https://news.ycombinator.com/item?id=46459832
• Show HN with adoption (Situation Monitor): https://news.ycombinator.com/item?id=47394458
• Thread with concrete clustering criticism (~300 points, 25 points): https://news.ycombinator.com/item?id=48737302
• Svelte port: https://github.com/MariusLang/mapcn-svelte · React Native: https://github.com/aikenahac/mapcn-react-native · flightcn: https://github.com/ridemountainpig/flightcn · netops: https://github.com/craigderington/netops · livewire-mapcn: https://github.com/kwasii1/livewire-mapcn
• The author’s precursor (Mapbox): https://github.com/AnmolSaini16/next-maps
• Videos: “Add Interactive Maps to React Easily” — Cand Dev (15,011 views): https://www.youtube.com/watch?v=M0p7EqjGgH4 · “mapcn: Beautiful Map Components for React (shadcn-style)” — Prism Labs (479 views): https://www.youtube.com/watch?v=BCtDw7MeVpM · “mapcn Review: The shadcn/ui of React Maps?” — TechWealth Hub (29 views): https://www.youtube.com/watch?v=oXQF7A1nRWM · “Build a Coffee Finder App with mapcn + OpenStreetMap (100% Free)” — Cand Dev: https://www.youtube.com/watch?v=70r94qnG_nA
• MapLibre ecosystem context (not a mapcn review): “FREE maps for any app - replace Google maps TODAY” — Syntax (124,715 views): https://www.youtube.com/watch?v=UAQogFwyna0

---

Note: this article draws on the README, llms.txt, and official mapcn documentation, the GitHub API (repository, contributors, commits, forks, repository search), the author’s profile and blog, Hacker News threads, the npm registry, and YouTube results, consulted on September 1, 2026. Figures change over time. Sources on Reddit, X/Twitter, and Product Hunt couldn’t be verified during this research.