---
name: "@shadcn-map"
slug: "shadcn-map"
description: "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."
category: "Maps"
tags: ["buttons", "dashboard", "design-system", "forms", "maps", "marketing", "overlays"]
framework: "react"
license: "MIT"
author: "tonghohin"
website: "https://shadcn-map.vercel.app"
github: "https://github.com/tonghohin/shadcn-map"
registry: "http://shadcn-map.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 328
component_count: 32
generated_at: "2026-07-28T08:59:05.895Z"
---

# @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.

## Links

- Website: https://shadcn-map.vercel.app
- GitHub: https://github.com/tonghohin/shadcn-map
- Registry JSON: http://shadcn-map.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/shadcn-map
- This file: https://sh4dcn.vercel.app/md/shadcn-map.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add http://shadcn-map.vercel.app/r/registry.json
pnpm dlx shadcn@latest add http://shadcn-map.vercel.app/r/registry.json
bunx shadcn@latest add http://shadcn-map.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/tonghohin/shadcn-map.git
# fetch the raw registry index
curl -s http://shadcn-map.vercel.app/r/registry.json
```

## Components (32)

| name | type | description | install |
| --- | --- | --- | --- |
| map | registry:ui | A map component. | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map.json` |
| basic-map | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/basic-map.json` |
| map-with-custom-tiles | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-custom-tiles.json` |
| map-with-markers | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-markers.json` |
| map-with-marker-cluster-group | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-marker-cluster-group.json` |
| map-with-custom-marker-cluster-group | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-custom-marker-cluster-group.json` |
| map-with-custom-markers | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-custom-markers.json` |
| map-with-circle | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-circle.json` |
| map-with-circle-marker | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-circle-marker.json` |
| map-with-polyline | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-polyline.json` |
| map-with-polygon | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-polygon.json` |
| map-with-rectangle | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-rectangle.json` |
| map-with-styled-shapes | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-styled-shapes.json` |
| map-with-popups-and-tooltips | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-popups-and-tooltips.json` |
| map-with-zoom-control | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-zoom-control.json` |
| map-with-layers-control | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-layers-control.json` |
| map-with-tile-layers-control | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-tile-layers-control.json` |
| map-with-layer-groups-control | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-layer-groups-control.json` |
| map-with-feature-groups-control | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-feature-groups-control.json` |
| map-with-locate-control | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-locate-control.json` |
| map-with-locate-control-callbacks | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-locate-control-callbacks.json` |
| map-with-custom-control-position | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-custom-control-position.json` |
| map-with-complex-custom-control-position | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-complex-custom-control-position.json` |
| map-with-draw-control | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-draw-control.json` |
| map-with-draw-control-callback | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-draw-control-callback.json` |
| map-with-draw-control-specific-shapes | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-draw-control-specific-shapes.json` |
| map-with-search-control | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-search-control.json` |
| map-with-search-control-place-select | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-search-control-place-select.json` |
| map-with-search-control-results-change | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-search-control-results-change.json` |
| map-with-search-control-configurations | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-search-control-configurations.json` |
| map-with-custom-control-container | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-custom-control-container.json` |
| map-with-fullscreen-control | registry:example | — | `npx shadcn@latest add http://shadcn-map.vercel.app/r/map-with-fullscreen-control.json` |

## For AI agents

```text
You are adding components from @shadcn-map to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/shadcn-map.md) for the component list.
2. Fetch the machine-readable index: http://shadcn-map.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: shadcn-map).
```