在 React 裡加地圖，通常是這種經歷：裝一堆依賴、設定 token、寫 wrapper 組件、處理 light/dark mode、和 Tailwind 打架。mapcn 直接把這些痛點消除——它用 shadcn/ui 的模式把 MapLibre GL 包成可複製貼上的 React 組件。
為什麼有意思？
shadcn/ui 改變了 React 組件庫的分發方式：不是 npm install 後 import，而是複製組件碼到你自己的 codebase。這樣你完全擁有組件，可以任意修改，也不會被版本鎖死。
mapcn 把這個模式帶到地圖領域——你複製組件，地圖就跑起來。沒有 library lock-in。
核心特性
| 特性 | 說明 |
|---|---|
| Theme-aware | 自動跟隨 light/dark mode |
| 零配置 | 預設值直接可用 |
| shadcn/ui 相容 | 遵循相同的設計 pattern |
| 豐富組件 | Markers、popups、routes、controls |
| MapLibre GL 驅動 | 完整地圖功能不受限 |
| TypeScript 原生 | 97.9% 程式碼是 TS |
技術棧
MapLibre GL → 地圖引擎（Mapbox 開源替代）
Tailwind CSS → 樣式系統
TypeScript → 型別安全
shadcn/ui → 設計語言相容
商業使用注意事項
mapcn 預設用 CARTO Basemap，商業使用需要企業授權。非商業使用免費，或可以換成其他 MapLibre 相容 tile provider（OpenStreetMap tile server、MapTiler、自架 tileserver 等）。這點上線前一定要注意。
適合誰用？
- 用 shadcn/ui 的 React 開發者：風格一致、pattern 熟悉
- 想避免 Mapbox token 成本：MapLibre 開源替代
- 要快速做地圖原型：零配置就有可用版本
- 位置類 SaaS：outdoor、物流、房地產、旅遊應用
結語
mapcn 不發明地圖技術，它做的是把既有技術包裝得更好用。7k stars 說明 React 社群真的在等這個東西。如果你下個專案要放地圖，不用再從零寫 wrapper 了——複製 mapcn 的組件，改掉 tile provider，30 分鐘搞定。