/

mapcn: A Map Broken Into Composable Parts

A single-purpose registry that does what the general ones do not: markers, popups and controls as components rather than an imperative API.

Serafim Korablev
Serafim Korablev
@korablev

mapcn is a single-purpose registry, and it is a good illustration of why those are worth knowing about: it does one thing the general registries do not do at all, which is give you a map broken into shadcn-shaped parts rather than one component with forty props.

11 of its components are published here.

The parts

Map is the container, and everything else composes into it: MapMarker, MarkerPopup, MarkerTooltip, MarkerLabel, LayerMarkers, MapControls and MapArc for connection lines.

That decomposition is the point. A map library gives you an imperative API and a plugin system; this gives you components you compose the way you compose everything else, with the styling in your own classes.

What it does not remove

The map guide's three decisions still apply, because they are about the tiles rather than the components. The map guide has them in full: the provider's pricing per map load, clustering past about a hundred markers, and lazy loading, since a map library plus a style plus tiles is one of the heaviest things a page can carry.

And the accessibility half is unchanged. A map is a picture to a screen reader, so whatever it communicates has to exist as text or as a list beside it - which is also what a search engine and an answer engine read, since neither can see the pins.

When to reach for it

When the map is a real feature: a store locator, a coverage view, a listing search. Then having markers, popups and controls as composable pieces is worth more than a monolithic component, because the popup can contain your components rather than a string of HTML.

When the map is decoration - a "we are everywhere" section - the map guide makes the case for a stylised SVG world or a small WebGL globe instead: no API key, no quota, no bill, and it renders identically for everyone.

Why single-purpose registries matter

The long-tail guide makes the general argument and this is the clearest example of it. Registries converge on the components that get attention, so the crowded shelves are heroes, backgrounds and text effects. A registry that does maps, or loaders, or hooks, is competing with almost nothing for exactly the thing you need on the one screen that needs it.

The trade is the usual one: a set this focused is a second or third source, and the same three checks apply - does it read your tokens, what does it install alongside itself, and will the file names collide.

Where else to look

The honest list, because the answer is not always us:

SourceBest forTrade-off
MapLibre / LeafletThe engine underneath, with full controlAn imperative API and a tile bill
A static tile imageOne location, one requestNothing interactive
An SVG world mapDecorative coverage with no dependencyNot geographic in any useful sense
21stComposable map parts and the decorative alternativesQuality varies by author, so preview before you take it

Taking one

Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:

bash

That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.

Browse map components →

Frequently asked

What does mapcn give you that a map library does not?
Composition. A map library gives you an imperative API and a plugin system; mapcn gives you a container plus markers, popups, tooltips, labels, layers, controls and arcs as separate components, so a popup can contain your components rather than a string of HTML.
Does a component wrapper remove the map's costs?
No. The provider's per-load pricing, clustering past about a hundred markers, and lazy loading all still apply, because those are properties of tiles rather than of components. So does the accessibility half: a map is a picture, so its information needs to exist as text beside it.
When should you not use a real map?
When the map is decoration. A we-are-everywhere section wants a stylised SVG world or a small WebGL globe: no API key, no quota, no bill, and it renders identically for everyone. Save the real map for a locator or a search where panning is the feature.
Why are single-purpose registries worth knowing?
Because registries converge on what gets attention, so the crowded shelves are heroes, backgrounds and text effects. A registry that does maps, or loaders, or hooks, competes with almost nothing for exactly the component the one screen that needs it requires.

Published

Aug 21, 2026

Read time

3 min

Tags

ComparisonRegistriesReactMaps

Share