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.

Supported platforms:Web
4 storiesView component

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.

Supported platforms:Web
3 storiesView component

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.

Supported platforms:Web
3 storiesView component

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.

Supported platforms:Web
5 storiesView component

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.

Supported platforms:Web
4 storiesView component

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.

Supported platforms:Web
3 storiesView component

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.

Supported platforms:Web
5 storiesView component

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.

Supported platforms:Web
3 storiesView component

Timelines

Chronological, historical, and interactive multi-track timelines for sequencing events over time.

Chronological Timeline

Media-rich, scroll-driven chronological timeline with alternating cards, image/video/audio media, and a progress strip. Install Chronological Timeline from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Historic Timeline

Specialized timeline for historical events spanning centuries or millennia, with era bands, period bars, and BCE/CE point markers. Install Historic Timeline from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Interactive Timeline

Zoomable, pannable, multi-track timeline with category filter, today marker, and click-to-select events. Install Interactive Timeline from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Canvas Overlays

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

Animated Beam

Animated gradient beam that connects two elements with a flowing light path. Install Animated Beam from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Follow Mode

Follow-mode chrome — outlines a region with a participant's color and surfaces a stop-following chip. Install Follow Mode from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

Handoff Beacon

Attention-routing beacon with pulsing ring and optional source / message card for live canvases. Install Handoff Beacon from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Selection Halo

Local-user selection halo with corner handles + label slot for spatial canvases. Install Selection Halo from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

Snap Guides

Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag. Install Snap Guides from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

Progress & Toolbars

Scroll and glass progress bars plus floating toolbars for reading state and contextual selection actions.

Glass Progress

Glass-styled progress bar with a translucent track and token-colored fill. Install Glass Progress from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Scroll Progress

Fixed bar that tracks reading progress down the page. Install Scroll Progress from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Floating Toolbar

Compact action bar that floats above a selection — primary / ghost / destructive variants. Install Floating Toolbar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Documents & Hierarchy

Tree views and primary-source document viewers for exploring nested data and archival source material.

Tree View

Hierarchical tree component for nested data with controlled state, single/multi-select, and keyboard navigation. Install Tree View from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Primary Source Viewer

Document viewer for historical primary sources with zoom, rotate, region annotations, transcription panel, and metadata footer. Install Primary Source Viewer from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

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.