Map

Dark-themed interactive map built on react-leaflet with CartoDB Dark Matter tiles, custom SVG cream markers, and popup labels.

Code

import { Map } from "@/components/ui/map"

export default function Example() {
  return <Map />
}

Installation

$npx particleui-cli add map

TSX

import { Map } from "@/components/ui/map"

export default function Example() {
  return <Map />
}

Prop	Type	Default	Required
position	[number, number]	—	yes
label	string	—	no
center	[number, number]	—	no
zoom	number	—	no
height	string \| number	—	no
markers	{ position: [number, number]; label?: string }[]	—	no
className	string	—	no

Source filecomponents/ui/map.tsx

Typeui

Categorieslayout, blocks

npm dependenciesreact-leaflet, leaflet

Registry deps

Claude skill—