Installation

A project with Tailwind CSS and shadcn/ui set up.

Run the following command to add the map component:

pnpm dlx shadcn@latest add @mapcn/map

This will install maplibre-gl and add the map component to your project.

Import and use the map component:

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>
  );
}

MapLibre parses tiles in a Web Worker, which ships as a separate file, so mapcn loads it from unpkg, pinned to your installed version. No setup needed - under a strict CSP, the worker needs:

script-src 'self' https://unpkg.com;
worker-src 'self' blob:;

Your basemap host needs its own entries alongside these.

To self-host it instead, copy both files into public/ - they must sit side by side:

cp node_modules/maplibre-gl/dist/maplibre-gl-worker.mjs \
   node_modules/maplibre-gl/dist/maplibre-gl-shared.mjs \
   public/

Then replace the unpkg URL near the top of the component:

MapLibreGL.setWorkerUrl("/maplibre-gl-worker.mjs");