The Problem

Developers who need interactive, theme‑aware maps often have to stitch together MapLibre, a UI kit, and custom styling. The integration work adds boilerplate, creates inconsistent look‑and‑feel, and requires manual configuration for controls, markers, and routes.

What This Does

mapcn ships a ready‑made collection of React components built on MapLibre GL, styled with Tailwind CSS, and wired to shadcn/ui primitives. The core component lives in src/registry/map.tsx, which exports a composable <Map> that accepts layers, markers, popups, and route data. Example pages such as src/app/(home)/components/examples/analytics-example.tsx and the documentation components under src/app/docs/components/examples/ demonstrate typical use‑cases (e.g., clustering, draggable markers, OSRM routing). The site itself is a Next.js app (next.config.ts) that doubles as a live demo and reference implementation.

How To Use It

Setup – Install dependencies and start the dev server. # Clone and install git clone https://github.com/your‑org/mapcn.git cd mapcn npm ci # uses package-lock.json npm run dev # standard Next.js dev script (next dev)

If npm run dev is missing, invoke npx next dev directly. Configuration – No mandatory config files; the library reads basemap settings from public/maps/map.json and public/maps/registry.json. To switch tile providers, edit the style.url field in public/maps/map.json. Running – The entry point for the component library is src/registry/map.tsx. Import it in a page or component: import Map from '@/registry/map';

export default function MyMap() { return <Map center={[0, 0]} zoom={4} />; }

The demo pages (e.g., src/app/(home)/page.tsx) already render the component with sample data.

Real‑World Use

A SaaS dashboard that needs a location‑aware analytics view can embed <Map> alongside shadcn/ui cards. For instance, the analytics-example.tsx component fetches mock data and overlays a heat‑map layer, showing how to combine MapLibre sources with existing UI components without additional setup.

import Map from '@/registry/map'; import { Card } from '@/components/ui/card';

export default function Dashboard() { return ( <div className="grid md:grid-cols-2 gap-4"> <Map center={[37.7749, -122.4194]} zoom={12} /> <Card>Other analytics widgets</Card> </div> ); }

Code Health & Issues

Medium – No test suite – No tests or .test. files; code paths are unverified. Medium – Missing CI/CD – .github only contains FUNDING.yml; no workflow files to enforce linting or builds. Low – License present – MIT license is included (LICENSE). Low – Dependency hygiene – package-lock.json pins exact versions, but no npm audit script is defined. Low – Documentation – 32 markdown files provide extensive usage guides, but API reference lacks type‑level examples. Low – Type safety – Project is TypeScript‑heavy (.tsx, .ts), but some utility modules (src/lib/utils.ts) expose loosely typed helpers; minor risk of runtime errors.

The Bottom Line

mapcn delivers a functional, well‑styled map component suite that integrates cleanly with Next.js and shadcn/ui, reducing the effort to add interactive maps. The codebase is TypeScript‑first and well documented, but the lack of automated tests and CI means you should add your own quality gates before production use. Ideal for teams that need a quick, opinionated map UI and are comfortable extending the library to meet stricter reliability requirements.