#What is MapCN?

MapCN is a collection of beautifully designed, accessible, and fully customizable map components that bring stunning interactive maps to your React (and Next.js) projects with shadcn/ui simplicity. It's perfect for developers, SaaS teams, dashboards, location-based apps, or any frontend needing maps without complex setup, heavy bundles, or paid APIs. Powered by MapLibre GL JS (open-source fork of Mapbox GL), Tailwind CSS v4+ for styling, and TypeScript, it integrates seamlessly as a shadcn/ui extension—install via CLI, import, and drop <Map /> into your app. Core value: zero-config beautiful maps that auto-adapt to your theme, support markers, controls, fly-to animations, routes, and real-world examples like fitness loops or EV charging overlays, all while keeping full code ownership and customization.

#Features ⚡

• One-Command Setup: Run npx shadcn@latest add https://mapcn.dev/maps/map.json to install MapLibre GL and add the map component instantly.

• Theme-Aware Basemaps: Uses free CARTO + OpenStreetMap tiles that switch automatically between light and dark modes—no API key needed.

• Composable Components: <Map />, <MapControls />, markers, tooltips, routes, paths, fly-to behaviors, and more for flexible map building.

• Tailwind CSS Styling: Matches shadcn/ui aesthetics with utility classes and CSS variables for easy theming and branding.

• Accessible & Keyboard-Friendly: Built with proper ARIA, focus management, and inclusive interactions.

• Interactive Examples: Real demos like Central Park running loops, EV charging stations, delivery routes, and animated fly-to views.

• Full Customization: Modify source code, add layers, controls, or custom markers since components live in your project.

• No Vendor Lock-In: Pure open-source stack with MapLibre GL—no Mapbox billing surprises.

#Pros ✅

• Dead-simple integration with shadcn/ui workflow—feels like adding any other shadcn component.

• Completely free, no API keys, no usage limits—ideal for indie devs and production apps.

• Beautiful defaults and auto theming save hours of styling work.

• Powerful MapLibre foundation supports advanced mapping (layers, vectors, 3D, etc.) under the hood.

• Growing fast with active users and community ports (e.g., Svelte version available).

#Cons ⚠️

• React/Next.js focused—requires shadcn/ui setup first (Tailwind, cn util, etc.).

• MapLibre learning curve if you need very advanced features beyond basics.

• Still emerging: core map component strong, but may have fewer specialized map patterns than full libraries like Leaflet wrappers.

• Relies on external tile providers (CARTO/OSM) for basemaps—fine for most but consider custom tiles for high-traffic apps.

#Included Components - Templates

• Map: Core interactive map container with zoom, pan, and theme-aware rendering.

• MapControls: Standard navigation controls (zoom in/out, compass, etc.).

• Markers & Tooltips: Customizable pins and hover/popover info displays.

• Routes & Paths: Draw lines for directions, trails, delivery paths, or fitness routes.

• Fly To: Animated camera movements to specific locations or bounds.

• Overlays & Examples: Pre-built patterns like activity loops, charging stations, trending areas.

• Composition Helpers: Utilities for layers, events, and custom interactions.

#Pricing 💸

• 100% free and open-source—no tiers, subscriptions, or paid features.

• All components, registry, and usage are fully accessible at no cost.

• MIT licensed for commercial or personal projects.

#Integrations 🧰

• shadcn/ui: Native CLI and registry compatibility for one-command adds.

• MapLibre GL JS: Core mapping engine (open-source, no API key).

• Tailwind CSS: Styling with shadcn/ui-like variables and utilities.

• React / Next.js: Primary framework support.

• TypeScript: Fully typed components and props.

• CARTO & OpenStreetMap: Free basemap tiles with attribution.