@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.
Install this registry
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 curl -s https://mapcn.dev/r/registry.json Components
8 totalA MapLibre-powered map component with markers, popups, tooltips, routes, and controls.
npx shadcn@latest add https://mapcn.dev/r/map.json Real-time analytics overview with a world map, breakdown cards, and device stats.
npx shadcn@latest add https://mapcn.dev/r/analytics-map.json World choropleth map shading countries by a metric, with a hover tooltip and legend.
npx shadcn@latest add https://mapcn.dev/r/choropleth.json 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 Domestic logistics map with a sidebar of stats.
npx shadcn@latest add https://mapcn.dev/r/logistics-network.json Searchable store list synced with map markers.
npx shadcn@latest add https://mapcn.dev/r/store-locator.json Globe-projected heatmap visualizing earthquake density with zoom-dependent styling.
npx shadcn@latest add https://mapcn.dev/r/heatmap.json Live order tracking with route progress, courier position, and order details.
npx shadcn@latest add https://mapcn.dev/r/delivery-tracker.json