VLLNT UI · Famille de composants
Composants Utility
Utility components are the helpers and effects that finish an interface — spinners, skeletons, copy buttons, QR codes, and visual flourishes like glass, particles, and shimmer. Small pieces that glue the rest together.
Background Effects
Decorative animated backgrounds — grid, dot, particle, meteor, and sparkle effects that add ambient motion behind any React section.
Animated Grid Pattern
Arriere-plan de grille decoratif avec des carres qui apparaissent et disparaissent en fondu de facon aleatoire. Installez Animated Grid Pattern depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesDot Pattern
Motif d'arriere-plan pointille decoratif construit a partir des couleurs de token. Installez Dot Pattern depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesMeteors
Pluie de meteores decorative avec des trainees qui tombent en arriere-plan. Installez Meteors depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesParticles
Champ de particules flottantes qui derive doucement en arriere-plan. Installez Particles depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesSparkles
Etincelles scintillantes decoratives dispersees derriere le contenu. Installez Sparkles depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesSurface & Border Effects
Frosted glass surfaces, animated borders, spotlights, and progressive blur for premium card and panel styling.
Glass Card
Surface de carte en verre depoli avec flou d'arriere-plan et fond translucide. Installez Glass Card depuis le registre VLLNT UI avec la CLI shadcn.
1 storyGlass Panel
Surface en verre depoli pour habillage flottant au-dessus d'un canvas — panneaux d'ancrage, barres d'outils survolantes et surcouches transitoires — avec fond translucide et bordure douce. Installez Glass Panel depuis le registre VLLNT UI avec la CLI shadcn.
1 storyLiquid Glass
Surface en verre avec un reflet degrade liquide anime. Installez Liquid Glass depuis le registre VLLNT UI avec la CLI shadcn.
1 storyBorder Beam
Faisceau d'accent anime qui parcourt la bordure d'une surface mise en evidence. Installez Border Beam depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesShine Border
Conteneur qui dessine une bordure en degrade anime autour de son contenu. Installez Shine Border depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesSpotlight Card
Carte avec un projecteur radial qui suit le pointeur. Installez Spotlight Card depuis le registre VLLNT UI avec la CLI shadcn.
1 storyProgressive Blur
Superposition de flou progressif qui estompe la nettete vers un bord. Installez Progressive Blur depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesMotion & Hover Interactions
Magnetic buttons, 3D card flips, shimmer sheens, animated counters, marquees, and loading spinners that bring pointer-driven motion to your UI.
Card Flip
Carte qui se retourne en 3D entre une face avant et une face arriere. Installez Card Flip depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesTilt Card
Carte qui s'incline en 3D vers le pointeur pour un survol parallaxe. Installez Tilt Card depuis le registre VLLNT UI avec la CLI shadcn.
1 storyMagnetic
Conteneur qui attire son contenu vers le pointeur pour un effet magnetique. Installez Magnetic depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesMagnetic Button
Bouton qui derive vers le pointeur pour un effet de survol magnetique. Installez Magnetic Button depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesShimmer Button
Bouton avec un reflet lumineux qui balaie sa surface. Installez Shimmer Button depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesShiny Button
Bouton avec un reflet en degrade brillant qui balaie en boucle. Installez Shiny Button depuis le registre VLLNT UI avec la CLI shadcn.
1 storyCursor
Suiveur de curseur personnalise qui traine derriere le pointeur. Installez Cursor depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesFloating Action Button
Bouton d'action a position fixe pour actions principales. Installez Floating Action Button depuis le registre VLLNT UI avec la CLI shadcn.
1 storyAnimated Text
Revelation de texte echelonnee pour les titres, les citations mises en avant et les courts textes d'accompagnement. Installez Animated Text depuis le registre VLLNT UI avec la CLI shadcn.
12 storiesNumber Ticker
Transitions numeriques animees pour les statistiques, les KPI et les mises en avant numeriques compactes. Installez Number Ticker depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesMarquee
Bandeau de contenu defilant en continu pour les badges, les logos et les pastilles de statut. Installez Marquee depuis le registre VLLNT UI avec la CLI shadcn.
5 storiesSpinner
Indicateur de chargement rotatif anime. Installez Spinner depuis le registre VLLNT UI avec la CLI shadcn.
1 storyCanvas Workspace & Collaboration
Pan-and-zoom canvas shells, connectors, object handles, and real-time presence cursors for building spatial, multiplayer workspaces.
Canvas Shell
Coque de disposition pour les espaces de travail canevas avec barre superieure, rail gauche, dock droit et regions d'emplacement inferieures. Installez Canvas Shell depuis le registre VLLNT UI avec la CLI shadcn.
1 storyCanvas View
Fenetre interactive de panoramique et de zoom pour les surfaces spatiales avec prise en charge du clavier, de la molette et des superpositions. Installez Canvas View depuis le registre VLLNT UI avec la CLI shadcn.
1 storyInfinite Plane
Arriere-plan deplacable en mosaique pour le canvas avec motif a points ou grille qui derive avec la fenetre. Installez Infinite Plane depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesAnchor Port
Marqueur de port pour les entrees, sorties et liens bidirectionnels d'objets sur le canevas. Installez Anchor Port depuis le registre VLLNT UI avec la CLI shadcn.
1 storyConnector Edge
Arete courbe entre des objets du canevas avec un etat d'etiquette en ligne optionnel. Installez Connector Edge depuis le registre VLLNT UI avec la CLI shadcn.
1 storyObject Handle
Poignee de glissement/repositionnement pour les objets spatiaux qui necessitent une cible de prise discrete. Installez Object Handle depuis le registre VLLNT UI avec la CLI shadcn.
1 storyGroup Hull
Conteneur de frontiere durable pour objets d'execution lies partageant contexte ou propriete. Installez Group Hull depuis le registre VLLNT UI avec la CLI shadcn.
1 storyContext Lens
Superposition en vignette qui assombrit le canevas en dehors d'une region de focus circulaire. Installez Context Lens depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesMulti Select Lasso
Superposition de rectangle de selection pour les gestes de selection multiple sur le canvas. Installez Multi Select Lasso depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesPlayback Ghost
Superposition translucide indiquant ou se trouvait un objet du canvas a un horodatage precedent pendant la lecture. Installez Playback Ghost depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesAlert Pulse
Superposition d'anneau pulsant pour alerter les objets du canevas, avec des tons de gravite. Installez Alert Pulse depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesState Badge Overlay
Puce d'etat epinglee au coin d'un objet du canvas — inactif, en file d'attente, en cours, termine, echoue, arrete. Installez State Badge Overlay depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesComment Pin
Epingle de discussion ancree rendue aux coordonnees du canevas avec auteur et badge de non-lus. Installez Comment Pin depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesLive Cursor
Curseur d'un utilisateur distant affiche aux coordonnees du canvas avec nom et pastille de statut. Installez Live Cursor depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesSelection Presence
Superposition a bordure en pointilles marquant ce qu'un autre utilisateur a selectionne sur le canvas. Installez Selection Presence depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesThread Bubble
Bulle de discussion etendue pour un fil de commentaires ancre sur le canvas. Installez Thread Bubble depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesLayout Helpers
Aspect-ratio boxes, resizable panels, custom scroll areas, tables of contents, and text truncation for structuring page layouts.
Aspect Ratio
Contraint le contenu a un rapport d'aspect specifie. Installez Aspect Ratio depuis le registre VLLNT UI avec la CLI shadcn.
1 storyResizable
Disposition de panneaux redimensionnables avec poignees deplacables. Installez Resizable depuis le registre VLLNT UI avec la CLI shadcn.
1 storyScroll Area
Zone defilable personnalisee avec barres de defilement stylisees. Installez Scroll Area depuis le registre VLLNT UI avec la CLI shadcn.
1 storyTable Of Contents
Table des matieres generee automatiquement a partir des titres de la page. Installez Table Of Contents depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesTable Of Contents Panel
Panneau lateral affichant une table des matieres pour la navigation dans la page. Installez Table Of Contents Panel depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesTruncated Text
Texte sur une seule ligne tronque avec des points de suspension lorsqu'il depasse une largeur maximale configurable. Installez Truncated Text depuis le registre VLLNT UI avec la CLI shadcn.
1 storyTheming & Providers
Light/dark theme toggles, preset switchers, and context providers for theming and internationalization across your app.
Lang Provider
Fournisseur de contexte pour la langue et l'internationalisation. Installez Lang Provider depuis le registre VLLNT UI avec la CLI shadcn.
1 storyTheme Preset Provider
Applique le preset de theme persiste au montage et injecte un script anti-scintillement pour que le preset enregistre soit defini avant le rendu. Installez Theme Preset Provider depuis le registre VLLNT UI avec la CLI shadcn.
1 storyTheme Provider
Fournisseur de contexte pour basculer entre theme clair et sombre. Installez Theme Provider depuis le registre VLLNT UI avec la CLI shadcn.
1 storyTheme Switcher
Rangee compacte d'echantillons pour basculer entre les presets de theme integres, synchronisee avec tous les autres consommateurs de la page. Installez Theme Switcher depuis le registre VLLNT UI avec la CLI shadcn.
1 storyTheme Toggle
Bouton pour basculer entre les themes clair et sombre. Installez Theme Toggle depuis le registre VLLNT UI avec la CLI shadcn.
1 storyLisible 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
- What's in the utility family?
- Indicators and helpers — spinners, skeletons, copy buttons, QR codes — plus visual effects like glass surfaces, particles, shimmer, and magnetic interactions.