Search nx-ui

Jump to any foundation, component, block or example.

Overview

Home
Components
Documentation

Brand iconsNew
ColoursNew
IconsNew
ShadowsNew
Theme matrixNew
TypographyNew

Activity FeedNew
App BreadcrumbsNew
App ShellNew
App SidebarNew
App SwitcherNew
Auth LoginNew
Auth RecoveryNew
Auth SignupNew
Avatar GroupNew
Calendar ViewNew
Device MockupNew
Empty StateNew
Error PageNew
Featured IconNew
Filter BarNew
KanbanNew
Media PlayerNew
Metric CardNew
Notification CentreNew
Nx LogoNew
Onboarding ChecklistNew
Org SwitcherNew
Page HeaderNew
Pricing TableNew
Scoped NavNew
Scroll FadeNew
SettingsNew
Sidebar NavNew
Theme ToggleNew
User MenuNew

InvoicesNew
Waste movementsNew
OrganisationsNew

AreaNew
BarNew
ComposedNew
Donut & pieNew
InteractiveNew
LineNew
Radial & gaugeNew
SparklinesNew

Chain Of CustodyNew
Compliance ChecklistNew
Ewc SelectorNew
Location SelectorNew
Material SelectorNew
Movement FormNew
OpportunitiesNew
Permit BadgeNew
Project Scope SelectorNew
Transfer NoteNew

Control RoomNew
DashboardNew
Empty statesNew
Forgot passwordNew
MaintenanceNew
MarketplaceNew
Movement detailNew
MovementsNew
404 — Not foundNew
Onboarding wizardNew
OpportunitiesNew
Scoped appNew
500 — Server errorNew
Settings — BillingNew
Settings — ProfileNew
Settings — TeamNew
Sign inNew
Sign upNew

BackdropNew
Background PatternsNew
Cta BannerNew
FaqNew
Feature CardNew
Feature RowNew
Grid BackdropNew
Hero SplitNew
How It WorksNew
Logo CloudNew
MotionNew
Page HeroNew
SectionNew
Site FooterNew
Site HeaderNew
Stats BandNew
TestimonialsNew

ArtifactNew
Chain of ThoughtNew
ChatNew
CheckpointNew
Code BlockNew
ConfirmationNew
ContextNew
ConversationNew
ImageNew
Inline CitationNew
LoaderNew
MessageNew
Model SelectorNew
Open in ChatNew
PlanNew
Prompt InputNew
QueueNew
ReasoningNew
ShimmerNew
SourcesNew
TaskNew
ToolNew
Web PreviewNew
WorkflowNew

Boundary MapNew
Camera & ToursNew
GlobeNew
IsochronesNew
Map MarkerNew
Map Stat OverlayNew
Map ToolbarNew
Map ViewNew
Route MapNew
RoutingNew
Site MapNew
3D TerrainNew
Tilted RoutesNew
Transfer PreviewNew

Listing CardNew
Listings FiltersNew
Listings PanelNew
Marketplace MapNew

App-shell patternNew
Components & blocksNew
ContributingNew
Getting startedNew
ThemingNew

Home
Maps

Maps

Mapbox-powered map blocks for Nexus apps — a theme-aware map frame, branded markers and popups, clustered site maps, movement routes and site-boundary parcels. Every block is built on react-map-gl and follows the light/dark basemap flip.

A site-boundary map rendering polygon parcels with a brand fill, outline and hover state.

Cinematic camera control on map-view — fly, ease and jump between sites, plus a chained, pausable site tour. Reduced-motion aware.

The globe projection with atmosphere and stars — a pausable idle spin that pops the Nexus site pins as the UK rotates into view.

Travel-time overlays with a settings popover, legend bar and point-in-polygon site filtering, fed by the mock nx-geo isochrone API.

A branded pin marker with a selected state and a rounded popup card for map annotations.

Map Stat Overlay

A floating glass stat and legend panel that sits over a map.

The glass-pill map control toolbar: a prop-driven standard arrangement (zoom, locate, Map/Satellite switcher, tool toggles, reset view) or fully composable groups, buttons and toggles.

A theme-aware Mapbox map wrapper with UUI-styled zoom and basemap-style controls.

A movement route map with origin and destination markers and a brand line with a dashed progress overlay.

Click-to-add waypoint routing with numbered draggable pins, the accent-yellow route line and a live info bar, fed by the mock nx-geo routing API.

A clustered site map: point markers that group into brand-coloured cluster bubbles you can click to expand.

Tilted-pitch 3D — Mapbox DEM terrain with atmospheric fog over Eryri, and composite fill-extrusion buildings over London's Docklands.

A movement route in tilted perspective — the route line and animated vehicle on a pitched camera, with a slow orbital rotation option.

Transfer Preview

The marketplace transfer-proposal flow: 70° cinematic camera choreography over a route, pulsing endpoint pins, and a bottom dock with source/destination cards, animated truck stats, a volume slider and a save-proposal callback.