VLLNT UI · Component family

Data Display components

Data-display components visualize spatial and temporal data — 2D maps, 3D globes, choropleths, heatmaps, route maps, and timelines. They render from plain data props, no map tiles or external services required.

Maps & Geography

Choropleth maps, 3D globes, route maps, and geographic heat maps for spatial and geospatial data.

Choropleth Map

Standalone SVG choropleth — region polygons shaded by data value with tooltip, legend, and accessible data-table fallback. Install Choropleth Map from the VLLNT UI registry with the shadcn CLI.

4 stories

Geography Quiz Map

Interactive identify-mode map quiz — click the correct region per prompt with visual feedback, score, and results panel. Install Geography Quiz Map from the VLLNT UI registry with the shadcn CLI.

3 stories

Globe 3D

Standalone SVG pseudo-3D globe — orthographic projection with auto-rotation, drag interaction, lat/lng markers, and great-circle arcs. Install Globe 3D from the VLLNT UI registry with the shadcn CLI.

3 stories

Heat Map Overlay

Standalone SVG geographic heat map — radial-gradient blobs with configurable radius, blur, gradient, and opacity. Install Heat Map Overlay from the VLLNT UI registry with the shadcn CLI.

5 stories

Map 2D

Lightweight 2D map primitive — SVG canvas with equirectangular projection, markers, popups, GeoJSON polygon layers, zoom controls, and an optional backdrop image. Install Map 2D from the VLLNT UI registry with the shadcn CLI.

4 stories

Map Timeline

Standalone SVG map + time slider — era polygons and year-pinned events appear as the user scrubs the timeline. Install Map Timeline from the VLLNT UI registry with the shadcn CLI.

3 stories

Route Map

Standalone SVG map with animated route paths, waypoints, and progress indicator. For trade routes, voyages, migrations, delivery tracking. Install Route Map from the VLLNT UI registry with the shadcn CLI.

5 stories

Story Map

Standalone SVG scroll-driven narrative map — IntersectionObserver tracks the active chapter and the map shifts to its center + zoom. Install Story Map from the VLLNT UI registry with the shadcn CLI.

3 stories

Canvas Overlays

Beams, beacons, selection halos, snap guides, and follow-mode chrome for interactive spatial canvases.

Frequently asked

How is data-display different from data?
Visualization-first components — maps, globes, choropleths, heatmaps, timelines, and specialized charts — that render spatial or temporal data.