KQ-1138 · ZONE/MAP

Zone Map

A stylised map of invented regions, drawn procedurally and identically on server and browser, with a list beside it that keeps the selection in words. Hover or keyboard focus lifts a region above a flat shadow on the snap spring; a click selects it with a fill that floods out from the click point to the coast on an enter tween timed to its reach and an outline that draws both ways round from the nearest vertex, and a second click drains it back into the point you tapped, while list rows arrive and make room on the glide spring. Arrow keys move to the nearest region in that direction, Home and End to the first and last, and Space or Enter toggles with the same flood, from the region's centre, and the same tock.

KQ-1138 · ZONE/MAP

Basinworks Crew 4 service area

Covered2

Quillon
Sorrel Reach

2 districts covered · tap a district to cover it

Open it on the Tactile stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/zone-map

Props

label: string; default —; The map's accessible name.
names: string[]; default nine invented names; Region names in map order, top-left first. They are also the ids in value; regions beyond the list are called Region 8, Region 9 and so on.
value / defaultValue: string[]; default []; The selected region names in the order they were picked, controlled or uncontrolled. Names not on the current map are ignored.
onValueChange: (value: string[]) => void; default —; Fires from the click, key or remove button that changed the selection, with the new list.
regions: number; default 7; How many regions the island is cut into. The same count and seed always draw the same map.
lift: number; default 4; How far hover and keyboard focus lift a region, in map units (the map is 200 wide). 0 leaves only the tint.
flood: boolean; default true; The fill floods out from the click point with a swish; off, it fades in whole and silently.
palette: "tide" | "ember" | "moss" | "ink"; default "tide"; The two theme colours every selected region's shade is mixed from: accent and signal, warn and danger, success and warn, or ink and ink-3.
seed: number; default 3; Another map for the same count.
listLabel: string; default "Covered"; The heading over the list beside the map, and the list's accessible name.
sound: boolean; default false; A tock on every select (lower and softer on a deselect) and a swish riding the flood. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the map, stops the lift and blocks changes from clicks, keys and the remove buttons.
className: string; default —; Merged onto the root's classes.

Prop	Type	Default	Description
label	string	—	The map's accessible name.
names	string[]	nine invented names	Region names in map order, top-left first. They are also the ids in value; regions beyond the list are called Region 8, Region 9 and so on.
value / defaultValue	string[]	[]	The selected region names in the order they were picked, controlled or uncontrolled. Names not on the current map are ignored.
onValueChange	(value: string[]) => void	—	Fires from the click, key or remove button that changed the selection, with the new list.
regions	number	7	How many regions the island is cut into. The same count and seed always draw the same map.
lift	number	4	How far hover and keyboard focus lift a region, in map units (the map is 200 wide). 0 leaves only the tint.
flood	boolean	true	The fill floods out from the click point with a swish; off, it fades in whole and silently.
palette	"tide" \| "ember" \| "moss" \| "ink"	"tide"	The two theme colours every selected region's shade is mixed from: accent and signal, warn and danger, success and warn, or ink and ink-3.
seed	number	3	Another map for the same count.
listLabel	string	"Covered"	The heading over the list beside the map, and the list's accessible name.
sound	boolean	false	A tock on every select (lower and softer on a deselect) and a swish riding the flood. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the map, stops the lift and blocks changes from clicks, keys and the remove buttons.
className	string	—	Merged onto the root's classes.