62

Get Started

Next

A map component built for shadcn/ui, following the same design patterns and styles. Uses Leaflet with React Leaflet, both open-source libraries, to provide interactive mapping.

Prerequisite

Before installing, make sure you already have shadcn/ui set up in your project.

Installation

pnpm dlx shadcn@latest add @shadcn-map/map

Usage

import {
    Map,
    MapMarker,
    MapPopup,
    MapTileLayer,
    MapZoomControl,
} from "@/components/ui/map"
<Map center={[43.6532, -79.3832]}>
    <MapTileLayer />
    <MapZoomControl />
    <MapMarker position={[43.6532, -79.3832]}>
        <MapPopup>A map component for shadcn/ui.</MapPopup>
    </MapMarker>
</Map>