342

Get Started

Next

A map component built for shadcn/ui, following the same design patterns and styles. Uses Leaflet with React Leaflet for interactive mapping, and MapLibre GL to render OpenFreeMap vector tiles, all open source and free to use without an API key.

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>