Mapcn

Overview

Mapcn is a collection of beautifully designed, accessible, and customizable map components for React. Built on MapLibre GL and styled with Tailwind CSS, it treats maps like any other UI primitive — copy the code, own the styles, ship vector maps that match your design system.

Key Features

• Copy & Paste Workflow: Distributed as a shadcn/ui registry. One CLI command drops the component source straight into your project — no package lock-in, full styling control.
• Production-Ready Visuals: Curated map blocks (dashboard widgets, stat overlays, city presets) that look polished out of the box instead of the default gray MapLibre tiles.
• Accessible by Default: Keyboard-friendly controls and semantic markup following the shadcn/ui philosophy.
• Composable Blocks: Beyond the core <Map> primitive, ready-made blocks combine cards, charts, and map layers into dashboard-grade sections.

Installation & Quick Start

pnpm dlx shadcn@latest add @mapcn/map

import { Map, MapControls } from "@/components/ui/map";
import { Card } from "@/components/ui/card";

export function MyMap() {
  return (
    <Card className="h-[320px] p-0 overflow-hidden">
      <Map center={[-74.006, 40.7128]} zoom={11}>
        <MapControls />
      </Map>
    </Card>
  );
}

Why Choose Mapcn?

1. You Want Source Ownership: Unlike Google Maps or Mapbox SDK wrappers, the component code lives in your repo — restyle everything with Tailwind tokens.
2. MapLibre Without the Pain: Skip configuring basemaps, controls, and dark mode from scratch; Mapcn ships sensible defaults.
3. Not For: Heavy GIS analysis or custom raster pipelines — reach for MapLibre GL JS directly when you need full control.