Introduction

mapcn-vue provides beautifully designed, accessible, and customizable map components for Vue. It is a Vue port of mapcn by @anmol, originally available for React. Built on MapLibre GL, styled with Tailwind CSS, and designed to play nice with shadcn-vue.

mapcn-vue follows the shadcn model for maps: copy-paste components you own, with zero lock-in and sensible defaults that work immediately.

Maps are often hidden behind heavy wrapper libraries and config-laden SDKs. mapcn-vue takes a different approach: it stays close to MapLibre, keeps the API familiar, and lets you drop down to the raw map instance whenever you need more control.

The goal is simple: make maps feel like the rest of your UI stack — composable, themeable, accessible, and easy to customize with Tailwind and shadcn patterns.

Most Vue map setups are either too opinionated or too heavy. mapcn-vue is built for teams that want to ship quickly without giving up control:

• Own Your Code: copy the components into your project and customize anything.
• Start Fast: one command and a basic map renders with production-ready defaults.
• Scale Safely: stay on top of MapLibre directly, drop to raw APIs when needed.
• Design-System Friendly: styled with Tailwind, fits naturally with shadcn-vue.

mapcn-vue works with any MapLibre-compatible tiles. You can use tiles from virtually any provider:

• OpenStreetMap — community-driven, open-source map data
• Carto — clean, minimal basemaps for data viz
• MapTiler — beautiful vector tiles, extensive customization
• Stadia Maps — fast, reliable tile hosting
• Thunderforest — outdoors, cycling, transport themes
• Any other provider that supports the MapLibre style spec