VLLNT UI · Famille de composants
Composants Data Display
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
Carte choroplethe SVG autonome, polygones de regions colores selon la valeur des donnees avec info-bulle, legende et repli en tableau de donnees accessible. Installez Choropleth Map depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesGeography Quiz Map
Quiz cartographique interactif en mode identification — cliquez la bonne region a chaque question avec retour visuel, score et panneau de resultats. Installez Geography Quiz Map depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesGlobe 3D
Globe pseudo-3D SVG autonome — projection orthographique avec rotation automatique, interaction par glisser, marqueurs lat/lng et arcs de grand cercle. Installez Globe 3D depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesHeat Map Overlay
Carte de chaleur geographique SVG autonome — taches en degrade radial avec rayon, flou, degrade et opacite configurables. Installez Heat Map Overlay depuis le registre VLLNT UI avec la CLI shadcn.
5 storiesMap 2D
Primitive de carte 2D legere — canvas SVG avec projection equirectangulaire, marqueurs, popups, couches de polygones GeoJSON, controles de zoom et une image de fond optionnelle. Installez Map 2D depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesMap Timeline
Carte SVG autonome et curseur temporel — les polygones d'epoque et les evenements dates apparaissent lorsque l'utilisateur parcourt la chronologie. Installez Map Timeline depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesRoute Map
Carte SVG autonome avec traces de routes animes, points de passage et indicateur de progression. Pour routes commerciales, voyages, migrations et suivi de livraison. Installez Route Map depuis le registre VLLNT UI avec la CLI shadcn.
5 storiesStory Map
Carte narrative SVG autonome pilotee par le defilement — IntersectionObserver suit le chapitre actif et la carte se deplace vers son centre + zoom. Installez Story Map depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesTimelines
Chronological, historical, and interactive multi-track timelines for sequencing events over time.
Chronological Timeline
Chronologie riche en medias et pilotee par le defilement avec des cartes alternees, des medias image/video/audio et une barre de progression. Installez Chronological Timeline depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesHistoric Timeline
Chronologie specialisee pour evenements historiques couvrant des siecles ou millenaires, avec bandes d'epoques, barres de periodes et marqueurs de points BCE/CE. Installez Historic Timeline depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesInteractive Timeline
Chronologie multi-pistes zoomable et deplacable avec filtre de categorie, marqueur du jour et evenements selectionnables au clic. Installez Interactive Timeline depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesCanvas Overlays
Beams, beacons, selection halos, snap guides, and follow-mode chrome for interactive spatial canvases.
Animated Beam
Faisceau degrade anime qui relie deux elements avec un trajet de lumiere fluide. Installez Animated Beam depuis le registre VLLNT UI avec la CLI shadcn.
1 storyFollow Mode
Habillage de mode suivi — encadre une region avec la couleur d'un participant et affiche une puce d'arret de suivi. Installez Follow Mode depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesHandoff Beacon
Balise de routage d'attention avec anneau pulsant et carte source / message optionnelle pour canvas en direct. Installez Handoff Beacon depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesSelection Halo
Halo de selection de l'utilisateur local avec poignees d'angle et emplacement d'etiquette pour les canvas spatiaux. Installez Selection Halo depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesSnap Guides
Superposition de guides d'alignement — lignes verticales et horizontales en pointilles qui apparaissent pendant un glissement. Installez Snap Guides depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesProgress & Toolbars
Scroll and glass progress bars plus floating toolbars for reading state and contextual selection actions.
Glass Progress
Barre de progression en verre avec piste translucide et remplissage colore par token. Installez Glass Progress depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesScroll Progress
Barre fixe qui suit la progression de lecture le long de la page. Installez Scroll Progress depuis le registre VLLNT UI avec la CLI shadcn.
1 storyFloating Toolbar
Barre d'actions compacte qui flotte au-dessus d'une selection — variantes primary / ghost / destructive. Installez Floating Toolbar depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesDocuments & Hierarchy
Tree views and primary-source document viewers for exploring nested data and archival source material.
Tree View
Composant d'arborescence hierarchique pour donnees imbriquees avec etat controle, selection simple ou multiple et navigation au clavier. Installez Tree View depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesPrimary Source Viewer
Visionneuse de documents pour sources primaires historiques avec zoom, rotation, annotations de zones, panneau de transcription et pied de page de metadonnees. Installez Primary Source Viewer depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesLisible par les agents
Votre agent IA peut aussi les installer.
Le registre est expose comme donnees structurees, afin que les agents de code choisissent le bon composant sans scraper le HTML.
Questions frequentes
- How is data-display different from data?
- Visualization-first components — maps, globes, choropleths, heatmaps, timelines, and specialized charts — that render spatial or temporal data.