VLLNT UI

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.

Browse all componentsHow agents consume the registry51 components

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.

Supported platforms:Web
2 storiesView component

Dot Pattern

Decorative dotted background pattern built from token colors. Install Dot Pattern from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Meteors

Decorative meteor shower of streaks falling across the background. Install Meteors from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Particles

Floating particle field that drifts gently in the background. Install Particles from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Sparkles

Decorative twinkling sparkles scattered behind content. Install Sparkles from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

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.

Supported platforms:Web
1 storyView component

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.

Supported platforms:Web
1 storyView component

Liquid Glass

Glass surface with an animated liquid gradient sheen. Install Liquid Glass from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

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.

Supported platforms:Web
2 storiesView component

Shine Border

Wrapper that draws an animated gradient border around its content. Install Shine Border from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Spotlight Card

Card with a radial spotlight that follows the pointer. Install Spotlight Card from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Progressive Blur

Progressive blur overlay that fades focus toward one edge. Install Progressive Blur from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

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.

Supported platforms:Web
2 storiesView component

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.

Supported platforms:Web
1 storyView component

Magnetic

Wrapper that pulls its content toward the pointer for a magnetic effect. Install Magnetic from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

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.

Supported platforms:Web
2 storiesView component

Shimmer Button

Button with a light sheen that sweeps across its surface. Install Shimmer Button from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

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.

Supported platforms:Web
1 storyView component

Cursor

Custom cursor follower that trails the pointer. Install Cursor from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Floating Action Button

Fixed-position action button for primary actions. Install Floating Action Button from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

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.

Supported platforms:WebNative
12 storiesView component

Number Ticker

Animated number transitions for stats, KPIs, and compact numeric callouts. Install Number Ticker from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Marquee

Continuously scrolling content lane for badges, logos, and status chips. Install Marquee from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
5 storiesView component

Spinner

Animated loading spinner indicator. Install Spinner from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

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.

Supported platforms:Web
1 storyView component

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.

Supported platforms:Web
1 storyView component

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.

Supported platforms:Web
4 storiesView component

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.

Supported platforms:Web
1 storyView component

Connector Edge

Curved edge between canvas objects with optional inline label state. Install Connector Edge from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

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.

Supported platforms:Web
1 storyView component

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.

Supported platforms:Web
1 storyView component

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.

Supported platforms:Web
4 storiesView component

Multi Select Lasso

Selection rectangle overlay for canvas multi-select gestures. Install Multi Select Lasso from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

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.

Supported platforms:Web
4 storiesView component

Alert Pulse

Pulsing ring overlay for alerting canvas objects, with severity tones. Install Alert Pulse from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

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.

Supported platforms:Web
4 storiesView component

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.

Supported platforms:Web
4 storiesView component

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.

Supported platforms:Web
4 storiesView component

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.

Supported platforms:Web
4 storiesView component

Thread Bubble

Expanded discussion bubble for an anchored canvas comment thread. Install Thread Bubble from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

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.

Supported platforms:WebNative
1 storyView component

Resizable

Resizable panel layout with draggable handles. Install Resizable from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Scroll Area

Custom scrollable area with styled scrollbars. Install Scroll Area from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Table Of Contents

Auto-generated table of contents from page headings. Install Table Of Contents from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

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.

Supported platforms:Web
2 storiesView component

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.

Supported platforms:WebNative
1 storyView component

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.

Supported platforms:Web
1 storyView component

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.

Supported platforms:Web
1 storyView component

Theme Provider

Context provider for light/dark theme switching. Install Theme Provider from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

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.

Supported platforms:Web
1 storyView component

Theme Toggle

Button to toggle between light and dark themes. Install Theme Toggle from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

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.

/llms.txt

Concise index per the llmstxt.org spec — sections, links, and descriptions.

/llms-full.txt

Full registry context in one fetch — docs plus every component descriptor.

/r/<name>.json

Per-component descriptor: props, accessibility schema, and usage examples.

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.