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.

Plateformes prises en charge:Web
2 storiesVoir le composant

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

Plateformes prises en charge:Web
2 storiesVoir le composant

Meteors

Pluie de meteores decorative avec des trainees qui tombent en arriere-plan. Installez Meteors depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
2 storiesVoir le composant

Particles

Champ de particules flottantes qui derive doucement en arriere-plan. Installez Particles depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
2 storiesVoir le composant

Sparkles

Etincelles scintillantes decoratives dispersees derriere le contenu. Installez Sparkles depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
2 storiesVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

Liquid Glass

Surface en verre avec un reflet degrade liquide anime. Installez Liquid Glass depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
2 storiesVoir le composant

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

Plateformes prises en charge:Web
2 storiesVoir le composant

Spotlight Card

Carte avec un projecteur radial qui suit le pointeur. Installez Spotlight Card depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
1 storyVoir le composant

Progressive Blur

Superposition de flou progressif qui estompe la nettete vers un bord. Installez Progressive Blur depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
2 storiesVoir le composant

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

Plateformes prises en charge:Web
2 storiesVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

Magnetic

Conteneur qui attire son contenu vers le pointeur pour un effet magnetique. Installez Magnetic depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
2 storiesVoir le composant

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

Plateformes prises en charge:Web
2 storiesVoir le composant

Shimmer Button

Bouton avec un reflet lumineux qui balaie sa surface. Installez Shimmer Button depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
2 storiesVoir le composant

Shiny Button

Bouton avec un reflet en degrade brillant qui balaie en boucle. Installez Shiny Button depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
1 storyVoir le composant

Cursor

Suiveur de curseur personnalise qui traine derriere le pointeur. Installez Cursor depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
2 storiesVoir le composant

Floating Action Button

Bouton d'action a position fixe pour actions principales. Installez Floating Action Button depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

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

Plateformes prises en charge:WebNatif
12 storiesVoir le composant

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

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Marquee

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.

Plateformes prises en charge:WebNatif
5 storiesVoir le composant

Spinner

Indicateur de chargement rotatif anime. Installez Spinner depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
4 storiesVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
4 storiesVoir le composant

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

Plateformes prises en charge:Web
4 storiesVoir le composant

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

Plateformes prises en charge:Web
4 storiesVoir le composant

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

Plateformes prises en charge:Web
4 storiesVoir le composant

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

Plateformes prises en charge:Web
4 storiesVoir le composant

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

Plateformes prises en charge:Web
4 storiesVoir le composant

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

Plateformes prises en charge:Web
4 storiesVoir le composant

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

Plateformes prises en charge:Web
4 storiesVoir le composant

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

Plateformes prises en charge:Web
4 storiesVoir le composant

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

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Resizable

Disposition de panneaux redimensionnables avec poignees deplacables. Installez Resizable depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Scroll Area

Zone defilable personnalisee avec barres de defilement stylisees. Installez Scroll Area depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
2 storiesVoir le composant

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

Plateformes prises en charge:Web
2 storiesVoir le composant

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

Plateformes prises en charge:WebNatif
1 storyVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

Theme Provider

Fournisseur de contexte pour basculer entre theme clair et sombre. Installez Theme Provider depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
1 storyVoir le composant

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

Plateformes prises en charge:Web
1 storyVoir le composant

Theme Toggle

Bouton pour basculer entre les themes clair et sombre. Installez Theme Toggle depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
1 storyVoir le composant

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.