VLLNT UI · Component family
Utility components
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
Decorative grid background with squares that fade in and out at random. Install Animated Grid Pattern from the VLLNT UI registry with the shadcn CLI.
Dot Pattern
Decorative dotted background pattern built from token colors. Install Dot Pattern from the VLLNT UI registry with the shadcn CLI.
Meteors
Decorative meteor shower of streaks falling across the background. Install Meteors from the VLLNT UI registry with the shadcn CLI.
Particles
Floating particle field that drifts gently in the background. Install Particles from the VLLNT UI registry with the shadcn CLI.
Sparkles
Decorative twinkling sparkles scattered behind content. Install Sparkles from the VLLNT UI registry with the shadcn CLI.
Surface & Border Effects
Frosted glass surfaces, animated borders, spotlights, and progressive blur for premium card and panel styling.
Glass Card
Frosted-glass card surface with backdrop blur and a translucent background. Install Glass Card from the VLLNT UI registry with the shadcn CLI.
Glass Panel
Frosted-glass surface for floating chrome above a canvas — dock panels, hovering toolbars, and transient overlays — with a translucent background and soft border. Install Glass Panel from the VLLNT UI registry with the shadcn CLI.
Liquid Glass
Glass surface with an animated liquid gradient sheen. Install Liquid Glass from the VLLNT UI registry with the shadcn CLI.
Border Beam
Animated accent beam that travels around the border of a highlighted surface. Install Border Beam from the VLLNT UI registry with the shadcn CLI.
Shine Border
Wrapper that draws an animated gradient border around its content. Install Shine Border from the VLLNT UI registry with the shadcn CLI.
Spotlight Card
Card with a radial spotlight that follows the pointer. Install Spotlight Card from the VLLNT UI registry with the shadcn CLI.
Progressive Blur
Progressive blur overlay that fades focus toward one edge. Install Progressive Blur from the VLLNT UI registry with the shadcn CLI.
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
Card that flips in 3D between a front and back face. Install Card Flip from the VLLNT UI registry with the shadcn CLI.
Tilt Card
Card that tilts in 3D toward the pointer for a parallax hover. Install Tilt Card from the VLLNT UI registry with the shadcn CLI.
Magnetic
Wrapper that pulls its content toward the pointer for a magnetic effect. Install Magnetic from the VLLNT UI registry with the shadcn CLI.
Magnetic Button
Button that drifts toward the pointer for a magnetic hover effect. Install Magnetic Button from the VLLNT UI registry with the shadcn CLI.
Shimmer Button
Button with a light sheen that sweeps across its surface. Install Shimmer Button from the VLLNT UI registry with the shadcn CLI.
Shiny Button
Button with a glossy gradient sheen that sweeps on a loop. Install Shiny Button from the VLLNT UI registry with the shadcn CLI.
Cursor
Custom cursor follower that trails the pointer. Install Cursor from the VLLNT UI registry with the shadcn CLI.
Floating Action Button
Fixed-position action button for primary actions. Install Floating Action Button from the VLLNT UI registry with the shadcn CLI.
Animated Text
Staggered text reveal for headings, pull quotes, and short supporting copy. Install Animated Text from the VLLNT UI registry with the shadcn CLI.
Number Ticker
Animated number transitions for stats, KPIs, and compact numeric callouts. Install Number Ticker from the VLLNT UI registry with the shadcn CLI.
Marquee
Continuously scrolling content lane for badges, logos, and status chips. Install Marquee from the VLLNT UI registry with the shadcn CLI.
Spinner
Animated loading spinner indicator. Install Spinner from the VLLNT UI registry with the shadcn CLI.
Canvas Workspace & Collaboration
Pan-and-zoom canvas shells, connectors, object handles, and real-time presence cursors for building spatial, multiplayer workspaces.
Canvas Shell
Layout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions. Install Canvas Shell from the VLLNT UI registry with the shadcn CLI.
Canvas View
Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support. Install Canvas View from the VLLNT UI registry with the shadcn CLI.
Infinite Plane
Tiled pannable backdrop for the canvas with dot or grid pattern that drifts with the viewport. Install Infinite Plane from the VLLNT UI registry with the shadcn CLI.
Anchor Port
Port marker for object inputs, outputs, and bidirectional links on the canvas. Install Anchor Port from the VLLNT UI registry with the shadcn CLI.
Connector Edge
Curved edge between canvas objects with optional inline label state. Install Connector Edge from the VLLNT UI registry with the shadcn CLI.
Object Handle
Drag/reposition affordance for spatial objects that need a calm grab target. Install Object Handle from the VLLNT UI registry with the shadcn CLI.
Group Hull
Durable boundary wrapper for related runtime objects sharing context or ownership. Install Group Hull from the VLLNT UI registry with the shadcn CLI.
Context Lens
Vignette overlay that dims the canvas outside a circular focus region. Install Context Lens from the VLLNT UI registry with the shadcn CLI.
Multi Select Lasso
Selection rectangle overlay for canvas multi-select gestures. Install Multi Select Lasso from the VLLNT UI registry with the shadcn CLI.
Playback Ghost
Translucent overlay marking where a canvas object was at a previous timestamp during playback. Install Playback Ghost from the VLLNT UI registry with the shadcn CLI.
Alert Pulse
Pulsing ring overlay for alerting canvas objects, with severity tones. Install Alert Pulse from the VLLNT UI registry with the shadcn CLI.
State Badge Overlay
State chip pinned to a canvas object's corner — idle, queued, running, complete, failed, stopped. Install State Badge Overlay from the VLLNT UI registry with the shadcn CLI.
Comment Pin
Anchored discussion pin rendered at canvas coordinates with author + unread badge. Install Comment Pin from the VLLNT UI registry with the shadcn CLI.
Live Cursor
Remote user's cursor rendered at canvas coordinates with name + status chip. Install Live Cursor from the VLLNT UI registry with the shadcn CLI.
Selection Presence
Dashed-border overlay marking what another user has selected on the canvas. Install Selection Presence from the VLLNT UI registry with the shadcn CLI.
Thread Bubble
Expanded discussion bubble for an anchored canvas comment thread. Install Thread Bubble from the VLLNT UI registry with the shadcn CLI.
Layout Helpers
Aspect-ratio boxes, resizable panels, custom scroll areas, tables of contents, and text truncation for structuring page layouts.
Aspect Ratio
Constrains content to a specified aspect ratio. Install Aspect Ratio from the VLLNT UI registry with the shadcn CLI.
Resizable
Resizable panel layout with draggable handles. Install Resizable from the VLLNT UI registry with the shadcn CLI.
Scroll Area
Custom scrollable area with styled scrollbars. Install Scroll Area from the VLLNT UI registry with the shadcn CLI.
Table Of Contents
Auto-generated table of contents from page headings. Install Table Of Contents from the VLLNT UI registry with the shadcn CLI.
Table Of Contents Panel
Side panel rendering a table of contents for page navigation. Install Table Of Contents Panel from the VLLNT UI registry with the shadcn CLI.
Truncated Text
Single-line text that truncates with an ellipsis when it exceeds a configurable max width. Install Truncated Text from the VLLNT UI registry with the shadcn CLI.
Theming & Providers
Light/dark theme toggles, preset switchers, and context providers for theming and internationalization across your app.
Lang Provider
Context provider for language and internationalization. Install Lang Provider from the VLLNT UI registry with the shadcn CLI.
Theme Preset Provider
Applies the persisted theme preset on mount and injects a no-flash script so the saved preset is set before paint. Install Theme Preset Provider from the VLLNT UI registry with the shadcn CLI.
Theme Provider
Context provider for light/dark theme switching. Install Theme Provider from the VLLNT UI registry with the shadcn CLI.
Theme Switcher
Compact swatch row for switching between built-in theme presets, kept in sync with every other consumer on the page. Install Theme Switcher from the VLLNT UI registry with the shadcn CLI.
Theme Toggle
Button to toggle between light and dark themes. Install Theme Toggle from the VLLNT UI registry with the shadcn CLI.
Readable by agents
Your AI agent can install these too.
The registry is exposed as structured data, so coding agents pick the right component without scraping HTML.
Frequently asked
- 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.