---
name: "@vllnt-ui"
slug: "vllnt-ui"
description: "VLLNT UI — agent-first React components for AI-native products, from UI primitives to finance and ops domains. Accessible, Radix + Tailwind, you own the code."
category: "Animated components"
tags: ["3d", "accessibility", "ai", "animation", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "design-system", "forms", "glassmorphism", "hooks", "loaders", "maps", "marketing", "media", "navigation", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "vllnt"
website: "https://ui.vllnt.com"
github: "https://github.com/vllnt/ui"
registry: "https://ui.vllnt.com/r/registry.json"
pro: false
pro_url: null
github_stars: 7
component_count: 250
generated_at: "2026-07-28T08:59:05.895Z"
---

# @vllnt-ui

VLLNT UI — agent-first React components for AI-native products, from UI primitives to finance and ops domains. Accessible, Radix + Tailwind, you own the code.

## Links

- Website: https://ui.vllnt.com
- GitHub: https://github.com/vllnt/ui
- Registry JSON: https://ui.vllnt.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/vllnt-ui
- This file: https://sh4dcn.vercel.app/md/vllnt-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.vllnt.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/registry.json
bunx shadcn@latest add https://ui.vllnt.com/r/registry.json
# clone the source repo
git clone https://github.com/vllnt/ui.git
# fetch the raw registry index
curl -s https://ui.vllnt.com/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:component | Collapsible content sections supporting single or multiple open items. | `npx shadcn@latest add https://ui.vllnt.com/r/accordion.json` |
| activity-heatmap | registry:component | Contribution-style grid for visualizing operational activity over time. | `npx shadcn@latest add https://ui.vllnt.com/r/activity-heatmap.json` |
| activity-log | registry:component | Paginated activity feed for audit history and analytics changes. | `npx shadcn@latest add https://ui.vllnt.com/r/activity-log.json` |
| agent-activity | registry:component | Visual display of an AI agent's execution chain — steps, tools, decisions, progress. | `npx shadcn@latest add https://ui.vllnt.com/r/agent-activity.json` |
| ai-artifact | registry:component | Rendered output area for AI-generated content with toolbar, copy/edit/download/fullscreen actions, and version chips. | `npx shadcn@latest add https://ui.vllnt.com/r/ai-artifact.json` |
| ai-chat-input | registry:component | Prompt composer for conversational interfaces with helper text, toolbar actions, and submit states. | `npx shadcn@latest add https://ui.vllnt.com/r/ai-chat-input.json` |
| ai-message-bubble | registry:component | Chat bubble for assistant, user, tool, and system messages using the current design system surfaces. | `npx shadcn@latest add https://ui.vllnt.com/r/ai-message-bubble.json` |
| ai-sidebar | registry:component | Slide-out AI assistant panel with provider, header / content / footer slots, and a standalone trigger. | `npx shadcn@latest add https://ui.vllnt.com/r/ai-sidebar.json` |
| ai-source-citation | registry:component | Compact source reference card for AI answers with a title, origin label, and optional excerpt. | `npx shadcn@latest add https://ui.vllnt.com/r/ai-source-citation.json` |
| ai-streaming-text | registry:component | Readable text block for partial assistant output with an optional live cursor while tokens stream in. | `npx shadcn@latest add https://ui.vllnt.com/r/ai-streaming-text.json` |
| ai-tool-call-display | registry:component | Structured card for tool invocation traces, statuses, serialized input, and returned output. | `npx shadcn@latest add https://ui.vllnt.com/r/ai-tool-call-display.json` |
| alert | registry:component | Displays an alert message to the user. | `npx shadcn@latest add https://ui.vllnt.com/r/alert.json` |
| alert-dialog | registry:component | Modal dialog for confirming destructive or important actions. | `npx shadcn@latest add https://ui.vllnt.com/r/alert-dialog.json` |
| alert-pulse | registry:component | Pulsing ring overlay for alerting canvas objects, with severity tones. | `npx shadcn@latest add https://ui.vllnt.com/r/alert-pulse.json` |
| anchor-port | registry:component | Port marker for object inputs, outputs, and bidirectional links on the canvas. | `npx shadcn@latest add https://ui.vllnt.com/r/anchor-port.json` |
| animated-beam | registry:component | Animated gradient beam that connects two elements with a flowing light path. | `npx shadcn@latest add https://ui.vllnt.com/r/animated-beam.json` |
| animated-grid-pattern | registry:component | Decorative grid background with squares that fade in and out at random. | `npx shadcn@latest add https://ui.vllnt.com/r/animated-grid-pattern.json` |
| animated-list | registry:component | List whose items animate in sequentially with a staggered entrance. | `npx shadcn@latest add https://ui.vllnt.com/r/animated-list.json` |
| animated-tabs | registry:component | Tabs with a sliding indicator that animates to the active item. | `npx shadcn@latest add https://ui.vllnt.com/r/animated-tabs.json` |
| animated-testimonials | registry:component | Testimonial carousel with animated transitions between quotes. | `npx shadcn@latest add https://ui.vllnt.com/r/animated-testimonials.json` |
| animated-text | registry:component | Staggered text reveal for headings, pull quotes, and short supporting copy. | `npx shadcn@latest add https://ui.vllnt.com/r/animated-text.json` |
| animated-tooltip | registry:component | Tooltip that animates in on hover or focus with a scale-and-fade. | `npx shadcn@latest add https://ui.vllnt.com/r/animated-tooltip.json` |
| annotation | registry:component | Inline highlight with an attached contextual note. | `npx shadcn@latest add https://ui.vllnt.com/r/annotation.json` |
| area-chart | registry:component | Renders an area chart for data visualization. | `npx shadcn@latest add https://ui.vllnt.com/r/area-chart.json` |
| aspect-ratio | registry:component | Constrains content to a specified aspect ratio. | `npx shadcn@latest add https://ui.vllnt.com/r/aspect-ratio.json` |
| auto-reload | registry:component | Toggle + collapsible threshold/amount form for automatic credit reloading with locale-aware currency. | `npx shadcn@latest add https://ui.vllnt.com/r/auto-reload.json` |
| avatar | registry:component | Displays a user avatar image with fallback initials. | `npx shadcn@latest add https://ui.vllnt.com/r/avatar.json` |
| avatar-group | registry:component | Overlapping avatar stack for participants, assignees, and collaborative contexts. | `npx shadcn@latest add https://ui.vllnt.com/r/avatar-group.json` |
| badge | registry:component | Small status label with variant styles. | `npx shadcn@latest add https://ui.vllnt.com/r/badge.json` |
| banner | registry:component | Full-width announcement bar with variants, dismissal, and an optional action slot. | `npx shadcn@latest add https://ui.vllnt.com/r/banner.json` |
| bar-chart | registry:component | Renders a bar chart for data visualization. | `npx shadcn@latest add https://ui.vllnt.com/r/bar-chart.json` |
| bento-grid | registry:component | Responsive bento-style grid layout with feature cards. | `npx shadcn@latest add https://ui.vllnt.com/r/bento-grid.json` |
| blog-card | registry:component | Card layout for displaying blog post previews. | `npx shadcn@latest add https://ui.vllnt.com/r/blog-card.json` |
| blur-reveal | registry:component | Reveals content with a blur-to-sharp transition when it scrolls into view. | `npx shadcn@latest add https://ui.vllnt.com/r/blur-reveal.json` |
| border-beam | registry:component | Animated accent beam that travels around the border of a highlighted surface. | `npx shadcn@latest add https://ui.vllnt.com/r/border-beam.json` |
| bottom-activity-strip | registry:component | Slim horizontally-scrolling row of recent canvas events for low-noise live activity. | `npx shadcn@latest add https://ui.vllnt.com/r/bottom-activity-strip.json` |
| bottom-bar | registry:component | Slim chrome strip pinned to the bottom of a canvas shell as a calm host for activity strips, status pills, and ambient indicators. | `npx shadcn@latest add https://ui.vllnt.com/r/bottom-bar.json` |
| breadcrumb | registry:component | Navigation breadcrumb trail showing the current page hierarchy. | `npx shadcn@latest add https://ui.vllnt.com/r/breadcrumb.json` |
| button | registry:component | Interactive button with multiple variants and sizes. | `npx shadcn@latest add https://ui.vllnt.com/r/button.json` |
| button-group | registry:component | Visually connected group of buttons that share borders. | `npx shadcn@latest add https://ui.vllnt.com/r/button-group.json` |
| calendar | registry:component | Date picker calendar for selecting dates. | `npx shadcn@latest add https://ui.vllnt.com/r/calendar.json` |
| callout | registry:component | Highlighted content block with variant styles for info, warning, danger, and more. | `npx shadcn@latest add https://ui.vllnt.com/r/callout.json` |
| candlestick-chart | registry:component | OHLC financial chart for session-by-session price action. | `npx shadcn@latest add https://ui.vllnt.com/r/candlestick-chart.json` |
| canvas-shell | registry:component | Layout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions. | `npx shadcn@latest add https://ui.vllnt.com/r/canvas-shell.json` |
| canvas-view | registry:component | Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support. | `npx shadcn@latest add https://ui.vllnt.com/r/canvas-view.json` |
| card | registry:component | Container with header, content, and footer sections. | `npx shadcn@latest add https://ui.vllnt.com/r/card.json` |
| card-flip | registry:component | Card that flips in 3D between a front and back face. | `npx shadcn@latest add https://ui.vllnt.com/r/card-flip.json` |
| carousel | registry:component | Scrollable content carousel with navigation controls. | `npx shadcn@latest add https://ui.vllnt.com/r/carousel.json` |
| category-filter | registry:component | Filterable category selection for content lists. | `npx shadcn@latest add https://ui.vllnt.com/r/category-filter.json` |
| chain-of-thought | registry:component | Ordered, status-aware visualization of a model's chain of thought with per-step state. | `npx shadcn@latest add https://ui.vllnt.com/r/chain-of-thought.json` |
| chat-dock-section | registry:component | Sidebar section that hosts a compact, scrollable chat thread alongside a spatial workspace — slotted into a dock or rail to keep an AI assistant in view. | `npx shadcn@latest add https://ui.vllnt.com/r/chat-dock-section.json` |
| checkbox | registry:component | Toggle control for boolean input. | `npx shadcn@latest add https://ui.vllnt.com/r/checkbox.json` |
| checkbox-group | registry:component | Group of related checkboxes backed by an array of selected values. | `npx shadcn@latest add https://ui.vllnt.com/r/checkbox-group.json` |
| checklist | registry:component | Interactive checklist with progress tracking and toggleable items. | `npx shadcn@latest add https://ui.vllnt.com/r/checklist.json` |
| choropleth-map | registry:component | Standalone SVG choropleth — region polygons shaded by data value with tooltip, legend, and accessible data-table fallback. | `npx shadcn@latest add https://ui.vllnt.com/r/choropleth-map.json` |
| chronological-timeline | registry:component | Media-rich, scroll-driven chronological timeline with alternating cards, image/video/audio media, and a progress strip. | `npx shadcn@latest add https://ui.vllnt.com/r/chronological-timeline.json` |
| civilization-card | registry:component | Civilization overview with hero band, BCE/CE era timeline, key stats, achievements, and notable leaders. | `npx shadcn@latest add https://ui.vllnt.com/r/civilization-card.json` |
| code-block | registry:component | Syntax-highlighted code display with copy support. | `npx shadcn@latest add https://ui.vllnt.com/r/code-block.json` |
| code-playground | registry:component | Interactive code editor with live preview. | `npx shadcn@latest add https://ui.vllnt.com/r/code-playground.json` |
| collapsible | registry:component | Expandable and collapsible content section. | `npx shadcn@latest add https://ui.vllnt.com/r/collapsible.json` |
| color-picker | registry:component | Popover color picker with swatches, a hue slider, and a hex input. | `npx shadcn@latest add https://ui.vllnt.com/r/color-picker.json` |
| combobox | registry:component | Searchable select input for choosing from a list of options. | `npx shadcn@latest add https://ui.vllnt.com/r/combobox.json` |
| command | registry:component | Command palette with search, groups, and keyboard navigation. | `npx shadcn@latest add https://ui.vllnt.com/r/command.json` |
| comment-pin | registry:component | Anchored discussion pin rendered at canvas coordinates with author + unread badge. | `npx shadcn@latest add https://ui.vllnt.com/r/comment-pin.json` |
| comparison | registry:component | Side-by-side comparison layout for content or features. | `npx shadcn@latest add https://ui.vllnt.com/r/comparison.json` |
| completion-dialog | registry:component | Dialog displayed upon completing a task or workflow. | `npx shadcn@latest add https://ui.vllnt.com/r/completion-dialog.json` |
| connector-edge | registry:component | Curved edge between canvas objects with optional inline label state. | `npx shadcn@latest add https://ui.vllnt.com/r/connector-edge.json` |
| content-intro | registry:component | Introductory section for content pages with title and description. | `npx shadcn@latest add https://ui.vllnt.com/r/content-intro.json` |
| context-lens | registry:component | Vignette overlay that dims the canvas outside a circular focus region. | `npx shadcn@latest add https://ui.vllnt.com/r/context-lens.json` |
| context-menu | registry:component | Right-click context menu with items and submenus. | `npx shadcn@latest add https://ui.vllnt.com/r/context-menu.json` |
| contribution-graph | registry:component | GitHub-style heatmap of daily activity over time. | `npx shadcn@latest add https://ui.vllnt.com/r/contribution-graph.json` |
| conversation-thread | registry:component | Compound component family for AI chat UIs that orchestrates auto-scroll, streaming indicators, empty states, and message rendering. | `npx shadcn@latest add https://ui.vllnt.com/r/conversation-thread.json` |
| cookie-consent | registry:component | Dismissible cookie-consent banner with positional variants and accept / reject actions for privacy compliance. | `npx shadcn@latest add https://ui.vllnt.com/r/cookie-consent.json` |
| copy-button | registry:component | Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook. | `npx shadcn@latest add https://ui.vllnt.com/r/copy-button.json` |
| countdown-timer | registry:component | Countdown and SLA timer for deadlines, escalations, and response windows. | `npx shadcn@latest add https://ui.vllnt.com/r/countdown-timer.json` |
| credit-badge | registry:component | Balance status pill for credits, wallet states, and billing health. | `npx shadcn@latest add https://ui.vllnt.com/r/credit-badge.json` |
| curriculum | registry:component | Course-layout container for a sequence of lessons or modules with title, progress, optional intro, and a stack of lesson rows. | `npx shadcn@latest add https://ui.vllnt.com/r/curriculum.json` |
| cursor | registry:component | Custom cursor follower that trails the pointer. | `npx shadcn@latest add https://ui.vllnt.com/r/cursor.json` |
| data-list | registry:component | Semantic key-value metadata layout for displaying labels with values. | `npx shadcn@latest add https://ui.vllnt.com/r/data-list.json` |
| data-table | registry:component | Enhanced data table with sorting, filtering, selection, and pagination controls. | `npx shadcn@latest add https://ui.vllnt.com/r/data-table.json` |
| date-field | registry:component | Native date input styled to match the design system. | `npx shadcn@latest add https://ui.vllnt.com/r/date-field.json` |
| date-picker | registry:component | Single-date picker built with the shared calendar and popover primitives. | `npx shadcn@latest add https://ui.vllnt.com/r/date-picker.json` |
| date-range-picker | registry:component | Popover calendar for selecting a start and end date. | `npx shadcn@latest add https://ui.vllnt.com/r/date-range-picker.json` |
| dialog | registry:component | Modal dialog overlay for focused content and actions. | `npx shadcn@latest add https://ui.vllnt.com/r/dialog.json` |
| display | registry:component | Oversized hero/display text driven by the display tokens, with an optional reduced-motion-safe reveal. | `npx shadcn@latest add https://ui.vllnt.com/r/display.json` |
| dock | registry:component | macOS-style dock whose icons magnify near the pointer. | `npx shadcn@latest add https://ui.vllnt.com/r/dock.json` |
| document-sibling-nav | registry:component | Newer/older navigator: links to the previous and next item in an ordered series. | `npx shadcn@latest add https://ui.vllnt.com/r/document-sibling-nav.json` |
| dot-pattern | registry:component | Decorative dotted background pattern built from token colors. | `npx shadcn@latest add https://ui.vllnt.com/r/dot-pattern.json` |
| drawer | registry:component | Slide-out panel anchored to the screen edge. | `npx shadcn@latest add https://ui.vllnt.com/r/drawer.json` |
| dropdown-menu | registry:component | Accessible dropdown menu with items, checkboxes, radio groups, and submenus. | `npx shadcn@latest add https://ui.vllnt.com/r/dropdown-menu.json` |
| edge-label | registry:component | Inline edge label for relationship semantics such as streams, handoffs, or policies. | `npx shadcn@latest add https://ui.vllnt.com/r/edge-label.json` |
| empty-state | registry:component | Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes. | `npx shadcn@latest add https://ui.vllnt.com/r/empty-state.json` |
| era-comparison | registry:component | Side-by-side comparison of historical eras with domain rows, color-themed columns, highlights, and figure chips. | `npx shadcn@latest add https://ui.vllnt.com/r/era-comparison.json` |
| exercise | registry:component | Interactive exercise block for learning content. | `npx shadcn@latest add https://ui.vllnt.com/r/exercise.json` |
| expandable-cards | registry:component | Cards that expand on click to reveal additional content. | `npx shadcn@latest add https://ui.vllnt.com/r/expandable-cards.json` |
| faq | registry:component | Frequently asked questions section with expandable answers. | `npx shadcn@latest add https://ui.vllnt.com/r/faq.json` |
| field | registry:component | Layout wrapper pairing a label, control, description, and error message. | `npx shadcn@latest add https://ui.vllnt.com/r/field.json` |
| fieldset | registry:component | Groups related fields under a shared legend. | `npx shadcn@latest add https://ui.vllnt.com/r/fieldset.json` |
| file-upload | registry:component | Dropzone-style file picker with previews for selected files. | `npx shadcn@latest add https://ui.vllnt.com/r/file-upload.json` |
| filter-bar | registry:component | Horizontal bar with filter controls for content lists. | `npx shadcn@latest add https://ui.vllnt.com/r/filter-bar.json` |
| flashcard | registry:component | Study card for active recall with prompt and answer states. | `npx shadcn@latest add https://ui.vllnt.com/r/flashcard.json` |
| floating-action-button | registry:component | Fixed-position action button for primary actions. | `npx shadcn@latest add https://ui.vllnt.com/r/floating-action-button.json` |
| floating-navbar | registry:component | Floating navigation bar that hides on scroll down and reveals on scroll up. | `npx shadcn@latest add https://ui.vllnt.com/r/floating-navbar.json` |
| floating-toolbar | registry:component | Compact action bar that floats above a selection — primary / ghost / destructive variants. | `npx shadcn@latest add https://ui.vllnt.com/r/floating-toolbar.json` |
| flow-diagram | registry:component | Interactive flow diagram with nodes, edges, and controls. | `npx shadcn@latest add https://ui.vllnt.com/r/flow-diagram.json` |
| follow-mode | registry:component | Follow-mode chrome — outlines a region with a participant's color and surfaces a stop-following chip. | `npx shadcn@latest add https://ui.vllnt.com/r/follow-mode.json` |
| form | registry:component | Validation wrapper for composing labels, descriptions, controls, and messages. | `npx shadcn@latest add https://ui.vllnt.com/r/form.json` |
| gantt-chart | registry:component | Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales. | `npx shadcn@latest add https://ui.vllnt.com/r/gantt-chart.json` |
| gauge-chart | registry:component | Semicircular gauge for a single value within a range. | `npx shadcn@latest add https://ui.vllnt.com/r/gauge-chart.json` |
| geography-quiz-map | registry:component | Interactive identify-mode map quiz — click the correct region per prompt with visual feedback, score, and results panel. | `npx shadcn@latest add https://ui.vllnt.com/r/geography-quiz-map.json` |
| glass-card | registry:component | Frosted-glass card surface with backdrop blur and a translucent background. | `npx shadcn@latest add https://ui.vllnt.com/r/glass-card.json` |
| glass-panel | registry:component | Frosted-glass surface for floating chrome above a canvas — dock panels, hovering toolbars, and transient overlays — with a translucent background and soft bord… | `npx shadcn@latest add https://ui.vllnt.com/r/glass-panel.json` |
| glass-progress | registry:component | Glass-styled progress bar with a translucent track and token-colored fill. | `npx shadcn@latest add https://ui.vllnt.com/r/glass-progress.json` |
| globe-3d | registry:component | Standalone SVG pseudo-3D globe — orthographic projection with auto-rotation, drag interaction, lat/lng markers, and great-circle arcs. | `npx shadcn@latest add https://ui.vllnt.com/r/globe-3d.json` |
| grid | registry:component | Responsive CSS grid layout primitive with breakpoint column and gap props. | `npx shadcn@latest add https://ui.vllnt.com/r/grid.json` |
| group-hull | registry:component | Durable boundary wrapper for related runtime objects sharing context or ownership. | `npx shadcn@latest add https://ui.vllnt.com/r/group-hull.json` |
| handoff-beacon | registry:component | Attention-routing beacon with pulsing ring and optional source / message card for live canvases. | `npx shadcn@latest add https://ui.vllnt.com/r/handoff-beacon.json` |
| heading | registry:component | Semantic heading (h1–h6) with theme-overridable font-family, weight, and size design tokens. | `npx shadcn@latest add https://ui.vllnt.com/r/heading.json` |
| heat-map-overlay | registry:component | Standalone SVG geographic heat map — radial-gradient blobs with configurable radius, blur, gradient, and opacity. | `npx shadcn@latest add https://ui.vllnt.com/r/heat-map-overlay.json` |
| heat-overlay | registry:component | Heatmap-style overlay drawing soft radial blobs for canvas activity samples. | `npx shadcn@latest add https://ui.vllnt.com/r/heat-overlay.json` |
| historic-timeline | registry:component | Specialized timeline for historical events spanning centuries or millennia, with era bands, period bars, and BCE/CE point markers. | `npx shadcn@latest add https://ui.vllnt.com/r/historic-timeline.json` |
| historical-figure-card | registry:component | Profile card with portrait, lifespan timeline, fields, works, quote, connections, and an expandable biography section. | `npx shadcn@latest add https://ui.vllnt.com/r/historical-figure-card.json` |
| horizontal-scroll-row | registry:component | Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar. | `npx shadcn@latest add https://ui.vllnt.com/r/horizontal-scroll-row.json` |
| hover-card | registry:component | Card that appears on hover for previewing content. | `npx shadcn@latest add https://ui.vllnt.com/r/hover-card.json` |
| infinite-plane | registry:component | Tiled pannable backdrop for the canvas with dot or grid pattern that drifts with the viewport. | `npx shadcn@latest add https://ui.vllnt.com/r/infinite-plane.json` |
| inline-input | registry:component | Inline text input with keyboard commit and cancel support. | `npx shadcn@latest add https://ui.vllnt.com/r/inline-input.json` |
| input | registry:component | Text input field for forms. | `npx shadcn@latest add https://ui.vllnt.com/r/input.json` |
| input-group | registry:component | Groups an input with leading or trailing addons. | `npx shadcn@latest add https://ui.vllnt.com/r/input-group.json` |
| input-otp | registry:component | One-time password input with segmented fields. | `npx shadcn@latest add https://ui.vllnt.com/r/input-otp.json` |
| interactive-timeline | registry:component | Zoomable, pannable, multi-track timeline with category filter, today marker, and click-to-select events. | `npx shadcn@latest add https://ui.vllnt.com/r/interactive-timeline.json` |
| item | registry:component | Flexible row layout with leading media, content, and trailing actions. | `npx shadcn@latest add https://ui.vllnt.com/r/item.json` |
| jarvis-dock | registry:component | Floating bottom dock with quick-action buttons + a command-palette trigger. | `npx shadcn@latest add https://ui.vllnt.com/r/jarvis-dock.json` |
| kbd | registry:component | Keyboard key indicator with platform-aware modifier expansion via the shortcut prop. | `npx shadcn@latest add https://ui.vllnt.com/r/kbd.json` |
| key-concept | registry:component | Highlighted definition block for key terms and a glossary list. | `npx shadcn@latest add https://ui.vllnt.com/r/key-concept.json` |
| keyboard-shortcuts-help | registry:component | Displays available keyboard shortcuts to the user. | `npx shadcn@latest add https://ui.vllnt.com/r/keyboard-shortcuts-help.json` |
| knowledge-check | registry:component | Inline knowledge check with multiple-choice / true-false / fill-blank questions, per-answer feedback, and a final score summary. | `npx shadcn@latest add https://ui.vllnt.com/r/knowledge-check.json` |
| label | registry:component | Accessible form label that associates descriptive text with an input control. | `npx shadcn@latest add https://ui.vllnt.com/r/label.json` |
| lang-provider | registry:component | Context provider for language and internationalization. | `npx shadcn@latest add https://ui.vllnt.com/r/lang-provider.json` |
| learning-objectives | registry:component | Lists learning goals for educational content. | `npx shadcn@latest add https://ui.vllnt.com/r/learning-objectives.json` |
| left-rail | registry:component | Compact vertical rail for canvas modes, tool actions, and secondary navigation controls. | `npx shadcn@latest add https://ui.vllnt.com/r/left-rail.json` |
| line-chart | registry:component | Renders a line chart for data visualization. | `npx shadcn@latest add https://ui.vllnt.com/r/line-chart.json` |
| link | registry:component | Styled anchor with emphasis variants and an external-link affordance. | `npx shadcn@latest add https://ui.vllnt.com/r/link.json` |
| liquid-glass | registry:component | Glass surface with an animated liquid gradient sheen. | `npx shadcn@latest add https://ui.vllnt.com/r/liquid-glass.json` |
| list-box | registry:component | Accessible single- or multi-select list of options. | `npx shadcn@latest add https://ui.vllnt.com/r/list-box.json` |
| live-cursor | registry:component | Remote user's cursor rendered at canvas coordinates with name + status chip. | `npx shadcn@latest add https://ui.vllnt.com/r/live-cursor.json` |
| live-feed | registry:component | Rolling activity stream for surfacing incidents, deploys, and operational signals in real time. | `npx shadcn@latest add https://ui.vllnt.com/r/live-feed.json` |
| magnetic | registry:component | Wrapper that pulls its content toward the pointer for a magnetic effect. | `npx shadcn@latest add https://ui.vllnt.com/r/magnetic.json` |
| magnetic-button | registry:component | Button that drifts toward the pointer for a magnetic hover effect. | `npx shadcn@latest add https://ui.vllnt.com/r/magnetic-button.json` |
| map-2d | registry:component | Lightweight 2D map primitive — SVG canvas with equirectangular projection, markers, popups, GeoJSON polygon layers, zoom controls, and an optional backdrop ima… | `npx shadcn@latest add https://ui.vllnt.com/r/map-2d.json` |
| map-timeline | registry:component | Standalone SVG map + time slider — era polygons and year-pinned events appear as the user scrubs the timeline. | `npx shadcn@latest add https://ui.vllnt.com/r/map-timeline.json` |
| market-treemap | registry:component | Sector-style market heatmap using weighted tiles and signed performance colors. | `npx shadcn@latest add https://ui.vllnt.com/r/market-treemap.json` |
| marquee | registry:component | Continuously scrolling content lane for badges, logos, and status chips. | `npx shadcn@latest add https://ui.vllnt.com/r/marquee.json` |
| mdx-content | registry:component | Renders MDX content with component mapping. | `npx shadcn@latest add https://ui.vllnt.com/r/mdx-content.json` |
| menubar | registry:component | Horizontal menu bar with dropdown menus. | `npx shadcn@latest add https://ui.vllnt.com/r/menubar.json` |
| meteors | registry:component | Decorative meteor shower of streaks falling across the background. | `npx shadcn@latest add https://ui.vllnt.com/r/meteors.json` |
| meter | registry:component | Static measurement bar (role=meter) for a known range, with optional segments. | `npx shadcn@latest add https://ui.vllnt.com/r/meter.json` |
| metric-cluster | registry:component | Compact stack of related metrics pinned to a canvas object's corner. | `npx shadcn@latest add https://ui.vllnt.com/r/metric-cluster.json` |
| metric-gauge | registry:component | Real-time arc and dial display for monitored percentages and utilization. | `npx shadcn@latest add https://ui.vllnt.com/r/metric-gauge.json` |
| mini-map-panel | registry:component | Viewport overview panel showing canvas bounds, markers, and the current zoom window. | `npx shadcn@latest add https://ui.vllnt.com/r/mini-map-panel.json` |
| model-comparison | registry:component | Side-by-side comparison of AI model responses with optional blind mode, metadata stats, and a vote bar. | `npx shadcn@latest add https://ui.vllnt.com/r/model-comparison.json` |
| model-selector | registry:component | Dropdown selector for choosing AI models. | `npx shadcn@latest add https://ui.vllnt.com/r/model-selector.json` |
| multi-select | registry:component | Popover-based multi-selection input with selected-value badges and optional search. | `npx shadcn@latest add https://ui.vllnt.com/r/multi-select.json` |
| multi-select-lasso | registry:component | Selection rectangle overlay for canvas multi-select gestures. | `npx shadcn@latest add https://ui.vllnt.com/r/multi-select-lasso.json` |
| native-select | registry:component | Styled wrapper around the native select element. | `npx shadcn@latest add https://ui.vllnt.com/r/native-select.json` |
| navbar-saas | registry:component | SaaS-style navigation bar with branding and links. | `npx shadcn@latest add https://ui.vllnt.com/r/navbar-saas.json` |
| navigation-menu | registry:component | Accessible navigation menu with links and sub-navigation. | `npx shadcn@latest add https://ui.vllnt.com/r/navigation-menu.json` |
| newsletter-signup | registry:component | Email-capture form with idle/sending/sent/error state machine, custom validators, and overridable labels. | `npx shadcn@latest add https://ui.vllnt.com/r/newsletter-signup.json` |
| number-input | registry:component | Numeric input with increment and decrement controls. | `npx shadcn@latest add https://ui.vllnt.com/r/number-input.json` |
| number-ticker | registry:component | Animated number transitions for stats, KPIs, and compact numeric callouts. | `npx shadcn@latest add https://ui.vllnt.com/r/number-ticker.json` |
| object-card | registry:component | Durable object view for agents, runs, artifacts, and tasks inside the canvas. | `npx shadcn@latest add https://ui.vllnt.com/r/object-card.json` |
| object-handle | registry:component | Drag/reposition affordance for spatial objects that need a calm grab target. | `npx shadcn@latest add https://ui.vllnt.com/r/object-handle.json` |
| object-inspector | registry:component | Right-dock detail header — kind chip, status dot, title/subtitle, with property-section slots. | `npx shadcn@latest add https://ui.vllnt.com/r/object-inspector.json` |
| order-book | registry:component | Level II bid/ask depth ladder with cumulative size bars and spread readout. | `npx shadcn@latest add https://ui.vllnt.com/r/order-book.json` |
| overview-board | registry:component | Grid of overview cards for at-a-glance dashboards — a row of headline metrics with consistent spacing and tone. | `npx shadcn@latest add https://ui.vllnt.com/r/overview-board.json` |
| pagination | registry:component | Page navigation controls with previous, next, and page links. | `npx shadcn@latest add https://ui.vllnt.com/r/pagination.json` |
| panel | registry:component | Bordered, titled content surface with header, body, and footer slots. | `npx shadcn@latest add https://ui.vllnt.com/r/panel.json` |
| parallel-timeline | registry:component | Multi-track timeline with shared time axis, BCE/CE event markers, and optional era bands for comparative history. | `npx shadcn@latest add https://ui.vllnt.com/r/parallel-timeline.json` |
| particles | registry:component | Floating particle field that drifts gently in the background. | `npx shadcn@latest add https://ui.vllnt.com/r/particles.json` |
| password-input | registry:component | Password field with a built-in visibility toggle. | `npx shadcn@latest add https://ui.vllnt.com/r/password-input.json` |
| phone-input | registry:component | Phone number input with a country dialing-code selector. | `npx shadcn@latest add https://ui.vllnt.com/r/phone-input.json` |
| pie-chart | registry:component | Proportional pie or donut chart for part-to-whole comparisons. | `npx shadcn@latest add https://ui.vllnt.com/r/pie-chart.json` |
| plan-badge | registry:component | Subscription tier indicator for pricing, billing, and account summaries. | `npx shadcn@latest add https://ui.vllnt.com/r/plan-badge.json` |
| playback-ghost | registry:component | Translucent overlay marking where a canvas object was at a previous timestamp during playback. | `npx shadcn@latest add https://ui.vllnt.com/r/playback-ghost.json` |
| policy-delivery-panel | registry:component | Right-dock panel listing policies / guardrails active for the route or run. | `npx shadcn@latest add https://ui.vllnt.com/r/policy-delivery-panel.json` |
| popover | registry:component | Floating content panel anchored to a trigger element. | `npx shadcn@latest add https://ui.vllnt.com/r/popover.json` |
| presence-stack | registry:component | Overlapping live-presence avatars with status dots and a sane overflow chip. | `npx shadcn@latest add https://ui.vllnt.com/r/presence-stack.json` |
| presence-sync-indicator | registry:component | Compact pill that surfaces live connection + sync health for a collaborative canvas. | `npx shadcn@latest add https://ui.vllnt.com/r/presence-sync-indicator.json` |
| pricing-table | registry:component | Plan comparison with feature checklist, tier highlighting, CTA, and an optional monthly/annual toggle. | `npx shadcn@latest add https://ui.vllnt.com/r/pricing-table.json` |
| primary-source-viewer | registry:component | Document viewer for historical primary sources with zoom, rotate, region annotations, transcription panel, and metadata footer. | `npx shadcn@latest add https://ui.vllnt.com/r/primary-source-viewer.json` |
| pro-tip | registry:component | Highlighted tip block with variants for tips, best practices, gotchas, and more. | `npx shadcn@latest add https://ui.vllnt.com/r/pro-tip.json` |
| profile-section | registry:component | User profile display section with avatar and details. | `npx shadcn@latest add https://ui.vllnt.com/r/profile-section.json` |
| progress-bar | registry:component | Visual progress indicator with labels and completion state. | `npx shadcn@latest add https://ui.vllnt.com/r/progress-bar.json` |
| progress-card | registry:component | Card displaying progress metrics and status. | `npx shadcn@latest add https://ui.vllnt.com/r/progress-card.json` |
| progress-tracker | registry:component | Curriculum-level learning dashboard for modules, lessons, exercises, streaks, and earned skills. | `npx shadcn@latest add https://ui.vllnt.com/r/progress-tracker.json` |
| progressive-blur | registry:component | Progressive blur overlay that fades focus toward one edge. | `npx shadcn@latest add https://ui.vllnt.com/r/progressive-blur.json` |
| prompt-input | registry:component | Auto-growing prompt textarea with a submit affordance and optional toolbar slot. | `npx shadcn@latest add https://ui.vllnt.com/r/prompt-input.json` |
| prompt-templates | registry:component | Searchable prompt template gallery with category filter, variable fill-in form, and onSelect. | `npx shadcn@latest add https://ui.vllnt.com/r/prompt-templates.json` |
| property-section | registry:component | Compact key/value grid for inspector panels — labels, sublabels, optional collapse. | `npx shadcn@latest add https://ui.vllnt.com/r/property-section.json` |
| prose | registry:component | Long-form content wrapper that styles raw HTML descendants with the token-driven type scale. | `npx shadcn@latest add https://ui.vllnt.com/r/prose.json` |
| qr-code | registry:component | Renders a QR code from a string value as a theme-aware SVG. | `npx shadcn@latest add https://ui.vllnt.com/r/qr-code.json` |
| quiz | registry:component | Interactive multiple-choice quiz with hints, explanations, and scoring. | `npx shadcn@latest add https://ui.vllnt.com/r/quiz.json` |
| radar-chart | registry:component | Spider chart comparing several metrics on shared axes. | `npx shadcn@latest add https://ui.vllnt.com/r/radar-chart.json` |
| radio-group | registry:component | Group of radio buttons for single-selection input. | `npx shadcn@latest add https://ui.vllnt.com/r/radio-group.json` |
| range-calendar | registry:component | Calendar that selects a start and end date as a range. | `npx shadcn@latest add https://ui.vllnt.com/r/range-calendar.json` |
| rating | registry:component | Inline star rating for lightweight learner feedback. | `npx shadcn@latest add https://ui.vllnt.com/r/rating.json` |
| reasoning | registry:component | Collapsible AI reasoning trace with streaming support and ordered or free-form steps. | `npx shadcn@latest add https://ui.vllnt.com/r/reasoning.json` |
| relationship-inspector | registry:component | Right-dock panel listing inbound + outbound edges of the focused canvas object. | `npx shadcn@latest add https://ui.vllnt.com/r/relationship-inspector.json` |
| resizable | registry:component | Resizable panel layout with draggable handles. | `npx shadcn@latest add https://ui.vllnt.com/r/resizable.json` |
| reveal-text | registry:component | Reveals text with a directional slide-and-fade when it enters the viewport. | `npx shadcn@latest add https://ui.vllnt.com/r/reveal-text.json` |
| right-dock | registry:component | Context dock for inspectors, summaries, and secondary canvas panels. | `npx shadcn@latest add https://ui.vllnt.com/r/right-dock.json` |
| role-badge | registry:component | Account role indicator for owners, admins, members, and billing contacts. | `npx shadcn@latest add https://ui.vllnt.com/r/role-badge.json` |
| route-map | registry:component | Standalone SVG map with animated route paths, waypoints, and progress indicator. For trade routes, voyages, migrations, delivery tracking. | `npx shadcn@latest add https://ui.vllnt.com/r/route-map.json` |
| routing-assignment-panel | registry:component | Right-dock panel listing the agent slots an active route dispatches to. | `npx shadcn@latest add https://ui.vllnt.com/r/routing-assignment-panel.json` |
| run-timeline | registry:component | Multi-lane execution timeline showing run phases over time, with optional cursor. | `npx shadcn@latest add https://ui.vllnt.com/r/run-timeline.json` |
| runtime-overview-panel | registry:component | Top-of-dock summary tile grid for runtime health when no canvas object is selected. | `npx shadcn@latest add https://ui.vllnt.com/r/runtime-overview-panel.json` |
| sankey-chart | registry:component | Flow diagram showing weighted links between nodes. | `npx shadcn@latest add https://ui.vllnt.com/r/sankey-chart.json` |
| scope-selector | registry:component | Multi-level scope picker for nested environments, teams, and targets. | `npx shadcn@latest add https://ui.vllnt.com/r/scope-selector.json` |
| scramble-text | registry:component | Scrambles characters then resolves them into the final text. | `npx shadcn@latest add https://ui.vllnt.com/r/scramble-text.json` |
| scroll-area | registry:component | Custom scrollable area with styled scrollbars. | `npx shadcn@latest add https://ui.vllnt.com/r/scroll-area.json` |
| scroll-progress | registry:component | Fixed bar that tracks reading progress down the page. | `npx shadcn@latest add https://ui.vllnt.com/r/scroll-progress.json` |
| search-bar | registry:component | Text search input with icon and clear functionality. | `npx shadcn@latest add https://ui.vllnt.com/r/search-bar.json` |
| search-dialog | registry:component | Full-screen search dialog with keyboard navigation. | `npx shadcn@latest add https://ui.vllnt.com/r/search-dialog.json` |
| search-field | registry:component | Search input with a leading icon and a clear button. | `npx shadcn@latest add https://ui.vllnt.com/r/search-field.json` |
| segmented-control | registry:component | Single-choice segmented selector for switching modes, views, or filters. | `npx shadcn@latest add https://ui.vllnt.com/r/segmented-control.json` |
| select | registry:component | Dropdown select input for choosing from a list of options. | `npx shadcn@latest add https://ui.vllnt.com/r/select.json` |
| selection-halo | registry:component | Local-user selection halo with corner handles + label slot for spatial canvases. | `npx shadcn@latest add https://ui.vllnt.com/r/selection-halo.json` |
| selection-presence | registry:component | Dashed-border overlay marking what another user has selected on the canvas. | `npx shadcn@latest add https://ui.vllnt.com/r/selection-presence.json` |
| separator | registry:component | Visual divider between content sections. | `npx shadcn@latest add https://ui.vllnt.com/r/separator.json` |
| severity-badge | registry:component | Operational severity label with tone variants and optional pulse for critical incidents. | `npx shadcn@latest add https://ui.vllnt.com/r/severity-badge.json` |
| share-dialog | registry:component | Modal dialog for sharing a page across social platforms with a copy-link action and overridable labels. | `npx shadcn@latest add https://ui.vllnt.com/r/share-dialog.json` |
| share-section | registry:component | Social sharing buttons and link copy section. | `npx shadcn@latest add https://ui.vllnt.com/r/share-section.json` |
| sheet | registry:component | Slide-over panel from the edge of the screen. | `npx shadcn@latest add https://ui.vllnt.com/r/sheet.json` |
| shimmer-button | registry:component | Button with a light sheen that sweeps across its surface. | `npx shadcn@latest add https://ui.vllnt.com/r/shimmer-button.json` |
| shimmer-text | registry:component | Text with a bright light band that sweeps across it. | `npx shadcn@latest add https://ui.vllnt.com/r/shimmer-text.json` |
| shine-border | registry:component | Wrapper that draws an animated gradient border around its content. | `npx shadcn@latest add https://ui.vllnt.com/r/shine-border.json` |
| shiny-button | registry:component | Button with a glossy gradient sheen that sweeps on a loop. | `npx shadcn@latest add https://ui.vllnt.com/r/shiny-button.json` |
| sidebar | registry:component | Collapsible sidebar navigation layout. | `npx shadcn@latest add https://ui.vllnt.com/r/sidebar.json` |
| sidebar-provider | registry:component | Context provider for managing sidebar open/close state. | `npx shadcn@latest add https://ui.vllnt.com/r/sidebar-provider.json` |
| sidebar-toggle | registry:component | Responsive toggle button for opening and closing the sidebar. | `npx shadcn@latest add https://ui.vllnt.com/r/sidebar-toggle.json` |
| skeleton | registry:component | Placeholder loading animation for content. | `npx shadcn@latest add https://ui.vllnt.com/r/skeleton.json` |
| slider | registry:component | Range slider input for selecting numeric values. | `npx shadcn@latest add https://ui.vllnt.com/r/slider.json` |
| slideshow | registry:component | Step-through slideshow for presenting content sequentially. | `npx shadcn@latest add https://ui.vllnt.com/r/slideshow.json` |
| snap-guides | registry:component | Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag. | `npx shadcn@latest add https://ui.vllnt.com/r/snap-guides.json` |
| sparkles | registry:component | Decorative twinkling sparkles scattered behind content. | `npx shadcn@latest add https://ui.vllnt.com/r/sparkles.json` |
| sparkline-grid | registry:component | KPI grid of labeled value tiles each paired with a compact sparkline trend. | `npx shadcn@latest add https://ui.vllnt.com/r/sparkline-grid.json` |
| spinner | registry:component | Animated loading spinner indicator. | `npx shadcn@latest add https://ui.vllnt.com/r/spinner.json` |
| spinning-text | registry:component | Text laid out in a circle that rotates continuously. | `npx shadcn@latest add https://ui.vllnt.com/r/spinning-text.json` |
| spotlight-card | registry:component | Card with a radial spotlight that follows the pointer. | `npx shadcn@latest add https://ui.vllnt.com/r/spotlight-card.json` |
| stat-card | registry:component | Headline KPI card for metrics, trends, and supporting context. | `npx shadcn@latest add https://ui.vllnt.com/r/stat-card.json` |
| state-badge-overlay | registry:component | State chip pinned to a canvas object's corner — idle, queued, running, complete, failed, stopped. | `npx shadcn@latest add https://ui.vllnt.com/r/state-badge-overlay.json` |

## For AI agents

```text
You are adding components from @vllnt-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/vllnt-ui.md) for the component list.
2. Fetch the machine-readable index: https://ui.vllnt.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: vllnt-ui).
```