KQ-888 · LOCATION/PIN

Location Pin

A place sent as a card, on a map that is drawn rather than fetched: a seeded hash lays out major roads, lanes, blocks, a park and a water bend. The pin drops the 16px shift onto its point on recoil, two visible bounces of an arrival, while its shadow scales up on the same spring; pressing expands the card in flow, the street group scaling toward the pin on glide and the detail animating to a ResizeObserver-measured height inside the card's own box. The toggle is a button with aria-expanded whose name carries the address and distance, and Escape collapses it and keeps focus.

KQ-888 · LOCATION/PIN

Distance420 mReading42.404 N · 4.706 W
08:14
Distance1.6 kmReading49.706 N · 4.309 W
08:16

2 places · collapsed · nearest 420 m

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/location-pin

Props

places: LocationPlace[]; default —; The thread, oldest first: id, side, name, address, seed, metres, time and delivery.
openId / defaultOpenId: string | null; default null; Controlled or initial id of the expanded card; one card opens at a time.
onOpenChange: (id: string | null) => void; default —; Fires from the press or key that expands or collapses a card.
onOpenPlace: (id: string) => void; default —; Fires from the expanded card's Open control, so the host can take the place.
zoom: number; default 1.9; How far the street group grows when a card expands.
format: (metres: number) => string; default —; Formats the distance chip; defaults to metres under a kilometre, one decimal above.
peerName: string; default "Them"; Names the other side in the card and delivery sentences.
label: string; default —; Names the thread list for assistive technology.

Prop	Type	Default	Description
places	LocationPlace[]	—	The thread, oldest first: id, side, name, address, seed, metres, time and delivery.
openId / defaultOpenId	string \| null	null	Controlled or initial id of the expanded card; one card opens at a time.
onOpenChange	(id: string \| null) => void	—	Fires from the press or key that expands or collapses a card.
onOpenPlace	(id: string) => void	—	Fires from the expanded card's Open control, so the host can take the place.
zoom	number	1.9	How far the street group grows when a card expands.
format	(metres: number) => string	—	Formats the distance chip; defaults to metres under a kilometre, one decimal above.
peerName	string	"Them"	Names the other side in the card and delivery sentences.
label	string	—	Names the thread list for assistive technology.