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.

Surface & Border Effects

Frosted glass surfaces, animated borders, spotlights, and progressive blur for premium card and panel styling.

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.

2 stories

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.

1 story

Magnetic

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

2 stories

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.

2 stories

Shimmer Button

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

2 stories

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.

1 story

Cursor

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

2 stories

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.

1 story

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.

12 stories

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.

2 stories

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.

5 stories

Spinner

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

1 story

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.

1 story

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.

1 story

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.

4 stories

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.

1 story

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.

1 story

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.

1 story

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.

1 story

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.

4 stories

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.

4 stories

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.

4 stories

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.

4 stories

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.

4 stories

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.

4 stories

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.

4 stories

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.

4 stories

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.

4 stories

Layout Helpers

Aspect-ratio boxes, resizable panels, custom scroll areas, tables of contents, and text truncation for structuring page layouts.

Theming & Providers

Light/dark theme toggles, preset switchers, and context providers for theming and internationalization across your app.

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.