shadcn-map

Overview

shadcn-map is an MIT-licensed map component for shadcn/ui, built by Hin (tonghohin). It follows shadcn/ui's design patterns and styles and installs into a project that already has shadcn/ui set up, adding a set of composable Map components under components/ui/map.

Interactive mapping is handled by Leaflet and React Leaflet. Base maps are rendered as OpenFreeMap vector tiles through MapLibre GL, with a fallback to OpenStreetMap raster tiles when WebGL is not available, so no API key is required. The docs site includes an API reference and examples for each part of the component.

Features

• Composable API: Map, MapTileLayer, MapMarker, MapPopup and MapZoomControl components used together in JSX
• Free base maps: OpenFreeMap vector tiles via MapLibre GL, with no API key needed
• Raster fallback: Falls back to OpenStreetMap tiles when WebGL is unsupported
• Markers: Standard and custom markers, plus marker cluster groups
• Shapes and overlays: Shapes, popups and tooltips
• Map controls: Zoom, fullscreen, layers, locate, search and draw controls
• Control layout: Custom control positions and custom control containers
• Custom tiles: Swap in a different tile source

Tech stack

• React, shadcn/ui, Leaflet, React Leaflet, MapLibre GL, OpenFreeMap

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @shadcn-map/component-name