@shadcn-map

shadcn-map is a single-component shadcn registry item providing a Leaflet-powered interactive map component styled to integrate with shadcn/ui's design system. Built with React Leaflet and Leaflet, it wraps map rendering in a shadcn-compatible component API. Very focused in scope — one map component with docs. Free and open-source (MIT). Use for: dropping an interactive Leaflet map into a shadcn/ui project without custom Leaflet setup, particularly when you need a lightweight alternative to Google Maps or Mapbox for location display in dashboards or forms.

32 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add http://shadcn-map.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add http://shadcn-map.vercel.app/r/registry.json

bun bunx shadcn@latest add http://shadcn-map.vercel.app/r/registry.json

fetch registry curl -s http://shadcn-map.vercel.app/r/registry.json

Components

32 total

Map ui

A map component.

npx shadcn@latest add http://shadcn-map.vercel.app/r/map.json

basic-map example

npx shadcn@latest add http://shadcn-map.vercel.app/r/basic-map.json

map-with-custom-tiles example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-custom-tiles.json

map-with-markers example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-markers.json

map-with-marker-cluster-group example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-marker-cluster-group.json

map-with-custom-marker-cluster-group example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-custom-marker-cluster-group.json

map-with-custom-markers example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-custom-markers.json

map-with-circle example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-circle.json

map-with-circle-marker example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-circle-marker.json

map-with-polyline example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-polyline.json

map-with-polygon example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-polygon.json

map-with-rectangle example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-rectangle.json

map-with-styled-shapes example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-styled-shapes.json

map-with-popups-and-tooltips example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-popups-and-tooltips.json

map-with-zoom-control example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-zoom-control.json

map-with-layers-control example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-layers-control.json

map-with-tile-layers-control example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-tile-layers-control.json

map-with-layer-groups-control example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-layer-groups-control.json

map-with-feature-groups-control example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-feature-groups-control.json

map-with-locate-control example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-locate-control.json

map-with-locate-control-callbacks example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-locate-control-callbacks.json

map-with-custom-control-position example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-custom-control-position.json

map-with-complex-custom-control-position example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-complex-custom-control-position.json

map-with-draw-control example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-draw-control.json

map-with-draw-control-callback example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-draw-control-callback.json

map-with-draw-control-specific-shapes example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-draw-control-specific-shapes.json

map-with-search-control example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-search-control.json

map-with-search-control-place-select example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-search-control-place-select.json

map-with-search-control-results-change example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-search-control-results-change.json

map-with-search-control-configurations example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-search-control-configurations.json

map-with-custom-control-container example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-custom-control-container.json

map-with-fullscreen-control example

npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-fullscreen-control.json