Introduction

mapcn provides beautifully designed, accessible, and customizable map components. Built on MapLibre GL, styled with Tailwind CSS, and designed to work with shadcn/ui.

There's no proper copy-paste, easy-to-use map integration for React. Most solutions require complex configurations, API keys, or heavy wrapper libraries. mapcn solves this:

• One Command: Run the install, get a working map. No config files, no API keys, no setup.
• Own Your Code: Copy the components into your project. Modify anything.
• No Wrapper Overhead: Built directly on MapLibre. Drop to the raw API whenever you need.
• Looks Good Already: Thoughtful defaults with dark mode. Style with Tailwind as needed.
• Works Anywhere: Bring your own tiles — MapTiler, Carto, OSM, or any MapLibre-compatible source.

mapcn uses MapLibre directly instead of wrapper libraries like react-map-gl. This keeps components close to the underlying API — when you copy a mapcn component, you fully own the map instance without extra framework dependencies.

UI elements like markers, popups, and tooltips are rendered via React portals, giving you complete styling freedom. You can drop down to raw MapLibre APIs anytime without "escaping" a wrapper.

mapcn works with any MapLibre-compatible tiles. This means you can use tiles from virtually any provider:

• MapTiler - Beautiful vector tiles with extensive customization options
• Carto - Clean, minimal basemaps perfect for data visualization
• OpenStreetMap - Community-driven, open-source map data
• Stadia Maps - Fast, reliable tile hosting with multiple styles
• Thunderforest - Specialized maps for outdoors, cycling, and transport
• And any other provider that supports the MapLibre style spec