What is this?
mapcn is a free, open-source library of ready-to-use React map components built on MapLibre GL and styled to match shadcn/ui, letting you drop maps into a React app with zero configuration.
mapcn is a free, open-source library of ready-to-use React map components built on MapLibre GL and styled to match shadcn/ui, letting you drop maps into a React app with zero configuration.Is this a mapping framework or a set of React components?It's a component library, not a framework — composable React pieces like markers, popups, routes, and controls that you add to an existing app, following the same conventions as shadcn/ui.
It's a component library, not a framework — composable React pieces like markers, popups, routes, and controls that you add to an existing app, following the same conventions as shadcn/ui.How do I add it to my project?mapcn is built for a single-command setup, following the shadcn/ui registry workflow for pulling components straight into a React project.
mapcn is built for a single-command setup, following the shadcn/ui registry workflow for pulling components straight into a React project.What does my project need to already have?You need a React app (the demo is built with Next.js) with MapLibre GL in place, since mapcn is a thin, styled layer on top of it.
You need a React app (the demo is built with Next.js) with MapLibre GL in place, since mapcn is a thin, styled layer on top of it.Can I use the default map tiles commercially for free?No — the bundled CARTO Basemaps require a CARTO Enterprise license for commercial use and are only free for CARTO grantees in non-commercial projects; you can switch to OpenStreetMap, MapTiler, or Stadia Maps tiles instead.
No — the bundled CARTO Basemaps require a CARTO Enterprise license for commercial use and are only free for CARTO grantees in non-commercial projects; you can switch to OpenStreetMap, MapTiler, or Stadia Maps tiles instead.What comes with it out of the box?Theme-aware map components with markers, popups, tooltips, routes/paths, and zoom/compass/locate/fullscreen controls — all of it adapting automatically to light and dark mode.
Theme-aware map components with markers, popups, tooltips, routes/paths, and zoom/compass/locate/fullscreen controls — all of it adapting automatically to light and dark mode.Why does it default to CARTO basemaps?CARTO Basemaps (built on OpenStreetMap data) give an easy out-of-the-box tile source, but since they have their own commercial terms, mapcn lets you swap in MapTiler, Stadia Maps, or any other MapLibre-compatible provider instead.
CARTO Basemaps (built on OpenStreetMap data) give an easy out-of-the-box tile source, but since they have their own commercial terms, mapcn lets you swap in MapTiler, Stadia Maps, or any other MapLibre-compatible provider instead.Does it lock me into shadcn, or is it just MapLibre underneath?It's built directly on MapLibre GL, so you get full access to MapLibre's mapping capabilities, while the component API and styling simply follow shadcn/ui's composable patterns.
It's built directly on MapLibre GL, so you get full access to MapLibre's mapping capabilities, while the component API and styling simply follow shadcn/ui's composable patterns.What are similar projects?rare-ui, canvas-ui, Monocharts, awesome-shadcn-ui, ui, arc-library, shadcn-vue, cult-ui
rare-ui, canvas-ui, Monocharts, awesome-shadcn-ui, ui, arc-library, shadcn-vue, cult-uiWhich topics is it in?maplibre, openstreetmap, gis, shadcn, maps, shadcn-ui, component-library, nextjs, ui-components, web-development, react, frontend
maplibre, openstreetmap, gis, shadcn, maps, shadcn-ui, component-library, nextjs, ui-components, web-development, react, frontend