A flat stylized map with pulsing pins. Hovering or focusing a pin raises a floating card with its details; arrow keys move between pins.
npx shadcn@latest add https://hyperblur.dev/r/map-pin-board.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/map-pin-board.tsx.
import { MapPinBoard } from "@/components/hyperblur/map-pin-board"
<MapPinBoard onPinSelect={(pin) => console.log(pin.title)} />| Prop | Type | Default | Description |
|---|---|---|---|
| pins | MapPin[] | defaultMapPins | Pins with id, x and y in percent, title, and optional subtitle, rating, meta and color. |
| accent | string | "#2f7bff" | Default pin color. A pin can override it with its own color. |
| selectedId | string | null | Controlled selected pin. Its card stays open when nothing is hovered. | |
| defaultSelectedId | string | null | null | Initially selected pin when uncontrolled. |
| onPinSelect | (pin: MapPin) => void | Called when a pin is clicked or activated with the keyboard. | |
| label | string | "Places nearby" | Chip text in the corner and accessible name of the map. |
| seed | number | 4 | Seed for the block layout, park and river. |