Listings Panel

The right-hand “Opportunities” overlay: a virtualised, keyboard-navigable list of the listings in view, with a live count header, sort menu, tone-ringed selection, hover ↔ pin sync, a collapse tab on desktop and a bottom sheet on mobile.

$bunx shadcn@latest add @nx-ui/listings-panel
Registry item
Installs withbadgebuttondropdown-menumarketplace-typesskeletonuse-marketplaceuse-mobileutils

Fifty London listings

Driven by the same use-marketplace hook as the map — here against a London query area with the server cap set to 50, no map attached.

Standalone panel

The panel is virtualised (@tanstack/react-virtual), so fifty or five thousand rows cost the same. Hover a row to drive the shared hover state, click to select (the ring takes the facility type's tone), use ↑/↓ to move between rows, and try the sort menu.

The count header is live: it reads the current visible set against the dataset total, and flags when the server capped the result.

Selected: none · Hovered: none

Opportunities