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.

Plateformes prises en charge:Web
4 storiesVoir le composant

Geography 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.

Plateformes prises en charge:Web
3 storiesVoir le composant

Globe 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.

Plateformes prises en charge:Web
3 storiesVoir le composant

Heat 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.

Plateformes prises en charge:Web
5 storiesVoir le composant

Map 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.

Plateformes prises en charge:Web
4 storiesVoir le composant

Map 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.

Plateformes prises en charge:Web
3 storiesVoir le composant

Route 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.

Plateformes prises en charge:Web
5 storiesVoir le composant

Story 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.

Plateformes prises en charge:Web
3 storiesVoir le composant

Timelines

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.

Plateformes prises en charge:Web
4 storiesVoir le composant

Historic 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.

Plateformes prises en charge:Web
4 storiesVoir le composant

Interactive 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.

Plateformes prises en charge:WebNatif
4 storiesVoir le composant

Canvas 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.

Plateformes prises en charge:Web
1 storyVoir le composant

Follow 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.

Plateformes prises en charge:Web
3 storiesVoir le composant

Handoff 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.

Plateformes prises en charge:Web
4 storiesVoir le composant

Selection 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.

Plateformes prises en charge:Web
3 storiesVoir le composant

Snap 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.

Plateformes prises en charge:Web
3 storiesVoir le composant

Progress & 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.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Scroll 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.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Floating 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.

Plateformes prises en charge:WebNatif
3 storiesVoir le composant

Documents & 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.

Plateformes prises en charge:WebNatif
4 storiesVoir le composant

Primary 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.

Plateformes prises en charge:Web
3 storiesVoir le composant

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.