---
name: "@mapcn"
slug: "mapcn"
description: "mapcn is a free, open-source shadcn/ui-style copy-paste registry of map components for React, built on MapLibre GL and styled with Tailwind CSS. Components cover the full map interaction set: Map, Controls, Markers, Popups, Routes, Arcs, Clusters, plus pre-built Blocks. Works with any MapLibre-compatible tile provider (OpenStreetMap, MapTiler, Carto, Stadia, Thunderforest) and automatically adapts to light/dark themes. Zero config out of the box; full TypeScript support. Use for: adding customizable, design-system-integrated interactive maps to a React/Next.js app without a heavyweight SDK, especially when the app already uses shadcn/ui patterns."
category: "Maps"
tags: ["blocks", "cards", "charts", "components", "e-commerce", "maps", "theming"]
framework: "react"
license: "MIT"
author: "AnmolSaini16"
website: "https://mapcn.dev"
github: "https://github.com/AnmolSaini16/mapcn"
registry: "https://mapcn.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 10614
component_count: 9
generated_at: "2026-07-28T08:00:50.948Z"
---

# @mapcn

mapcn is a free, open-source shadcn/ui-style copy-paste registry of map components for React, built on MapLibre GL and styled with Tailwind CSS. Components cover the full map interaction set: Map, Controls, Markers, Popups, Routes, Arcs, Clusters, plus pre-built Blocks. Works with any MapLibre-compatible tile provider (OpenStreetMap, MapTiler, Carto, Stadia, Thunderforest) and automatically adapts to light/dark themes. Zero config out of the box; full TypeScript support. Use for: adding customizable, design-system-integrated interactive maps to a React/Next.js app without a heavyweight SDK, especially when the app already uses shadcn/ui patterns.

## Links

- Website: https://mapcn.dev
- GitHub: https://github.com/AnmolSaini16/mapcn
- Registry JSON: https://mapcn.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/mapcn
- This file: https://sh4dcn.vercel.app/md/mapcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://mapcn.dev/r/registry.json
pnpm dlx shadcn@latest add https://mapcn.dev/r/registry.json
bunx shadcn@latest add https://mapcn.dev/r/registry.json
# clone the source repo
git clone https://github.com/AnmolSaini16/mapcn.git
# fetch the raw registry index
curl -s https://mapcn.dev/r/registry.json
```

## Components (9)

| name | type | description | install |
| --- | --- | --- | --- |
| map | registry:ui | A MapLibre-powered map component with markers, popups, tooltips, routes, and controls. | `npx shadcn@latest add https://mapcn.dev/r/map.json` |
| analytics-map | registry:block | Real-time analytics overview with a world map, breakdown cards, and device stats. | `npx shadcn@latest add https://mapcn.dev/r/analytics-map.json` |
| choropleth | registry:block | World choropleth map shading countries by a metric, with a hover tooltip and legend. | `npx shadcn@latest add https://mapcn.dev/r/choropleth.json` |
| analytics-card | registry:block | Compact analytics card with a headline metric over a world map. | `npx shadcn@latest add https://mapcn.dev/r/analytics-card.json` |
| delivery-tracker | registry:block | Live order tracking with route progress, courier position, and order details. | `npx shadcn@latest add https://mapcn.dev/r/delivery-tracker.json` |
| uptime-monitor | registry:block | Status-page style map of edge network locations with live health, latency, and uptime. | `npx shadcn@latest add https://mapcn.dev/r/uptime-monitor.json` |
| heatmap | registry:block | Globe-projected heatmap visualizing earthquake density with zoom-dependent styling. | `npx shadcn@latest add https://mapcn.dev/r/heatmap.json` |
| logistics-network | registry:block | Domestic logistics map with a sidebar of stats. | `npx shadcn@latest add https://mapcn.dev/r/logistics-network.json` |
| store-locator | registry:block | Searchable store list synced with map markers. | `npx shadcn@latest add https://mapcn.dev/r/store-locator.json` |

## For AI agents

```text
You are adding components from @mapcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/mapcn.md) for the component list.
2. Fetch the machine-readable index: https://mapcn.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: mapcn).
```