MapCN Offers Shadcn-Compatible Maps
MapCN, a new map component, has been released that is fully compatible with Shadcn/UI. It allows developers to seamlessly integrate modern, design-system-aligned maps into any Next.js or React application.
MapCN is built directly on MapLibre GL, an open-source fork of Mapbox GL. This avoids the need for wrapper libraries and gives developers direct access to the underlying map API when they need more advanced features. UI elements like markers and popups are rendered via React portals, allowing for complete styling control. A core principle of both Shadcn/UI and MapCN is the idea of "owning your code." Instead of installing a package from npm, developers use a CLI command to copy the component source code directly into their project. This allows for full customization and avoids dependency overhead. Out of the box, MapCN requires zero configuration and no API keys to get started. It uses free map tiles from CARTO and OpenStreetMap that are theme-aware, automatically switching between light and dark styles to match your application's design. While it works with free tiles for non-commercial use, MapCN is compatible with any MapLibre-compatible tile provider. This allows developers to use other services like MapTiler, Stadia Maps, or Thunderforest for more specialized or commercial projects.
