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 storiesGeography 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 storiesGlobe 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 storiesHeat 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 storiesMap 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 storiesMap 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 storiesRoute 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 storiesStory 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 storiesTimelines
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.
4 storiesHistoric 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.
4 storiesInteractive 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.
4 storiesCanvas 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.
1 storyFollow 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.
3 storiesHandoff 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.
4 storiesSelection 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.
3 storiesSnap 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.
3 storiesProgress & 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.
2 storiesScroll Progress
Fixed bar that tracks reading progress down the page. Install Scroll Progress from the VLLNT UI registry with the shadcn CLI.
1 storyFloating 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.
3 storiesDocuments & 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.
4 storiesPrimary 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.
3 storiesReadable by agents
Your AI agent can install these too.
The registry is exposed as structured data, so coding agents pick the right component without scraping HTML.
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.