# VLLNT UI

> Agent-first React component registry. 225 accessible components built on Radix UI, Tailwind CSS, and CVA. Install via the shadcn CLI against any /r/<name>.json endpoint.

## Docs

- [Get Started](https://ui.vllnt.ai/): install and use any component
- [Documentation](https://ui.vllnt.ai/docs): theming, registry usage, conventions
- [Philosophy](https://ui.vllnt.ai/philosophy): design principles and component patterns
- [Components index](https://ui.vllnt.ai/components): browse all components by category

## Registry API

- [Registry index](https://ui.vllnt.ai/r/registry.json): full machine-readable list of all components
- [Sitemap](https://ui.vllnt.ai/sitemap.xml): every public route, refreshed per deploy
- Install command: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/<name>.json`

## Components — Core primitives

- [Avatar](https://ui.vllnt.ai/components/avatar): Displays a user avatar image with fallback initials.
- [Badge](https://ui.vllnt.ai/components/badge): Small status label with variant styles.
- [Banner](https://ui.vllnt.ai/components/banner): Full-width announcement bar with variants, dismissal, and an optional action slot.
- [Button](https://ui.vllnt.ai/components/button): Interactive button with multiple variants and sizes.
- [Checkbox](https://ui.vllnt.ai/components/checkbox): Toggle control for boolean input.
- [Copy Button](https://ui.vllnt.ai/components/copy-button): Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook.
- [Empty State](https://ui.vllnt.ai/components/empty-state): Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes.
- [Input](https://ui.vllnt.ai/components/input): Text input field for forms.
- [Kbd](https://ui.vllnt.ai/components/kbd): Keyboard key indicator with platform-aware modifier expansion via the shortcut prop.
- [Radio Group](https://ui.vllnt.ai/components/radio-group): Group of radio buttons for single-selection input.
- [Separator](https://ui.vllnt.ai/components/separator): Visual divider between content sections.
- [Skeleton](https://ui.vllnt.ai/components/skeleton): Placeholder loading animation for content.
- [Slider](https://ui.vllnt.ai/components/slider): Range slider input for selecting numeric values.
- [Textarea](https://ui.vllnt.ai/components/textarea): Multi-line text input field.
- [Toggle](https://ui.vllnt.ai/components/toggle): Two-state toggle button.
- [Toggle Group](https://ui.vllnt.ai/components/toggle-group): Group of toggle buttons for single or multiple selection.

## Components — Form

- [Calendar](https://ui.vllnt.ai/components/calendar): Date picker calendar for selecting dates.
- [Category Filter](https://ui.vllnt.ai/components/category-filter): Filterable category selection for content lists.
- [Combobox](https://ui.vllnt.ai/components/combobox): Searchable select input for choosing from a list of options.
- [Date Picker](https://ui.vllnt.ai/components/date-picker): Single-date picker built with the shared calendar and popover primitives.
- [File Upload](https://ui.vllnt.ai/components/file-upload): Dropzone-style file picker with previews for selected files.
- [Filter Bar](https://ui.vllnt.ai/components/filter-bar): Horizontal bar with filter controls for content lists.
- [Form](https://ui.vllnt.ai/components/form): Validation wrapper for composing labels, descriptions, controls, and messages.
- [Inline Input](https://ui.vllnt.ai/components/inline-input): Inline text input with keyboard commit and cancel support.
- [Input OTP](https://ui.vllnt.ai/components/input-otp): One-time password input with segmented fields.
- [Model Selector](https://ui.vllnt.ai/components/model-selector): Dropdown selector for choosing AI models.
- [Multi Select](https://ui.vllnt.ai/components/multi-select): Popover-based multi-selection input with selected-value badges and optional search.
- [Newsletter Signup](https://ui.vllnt.ai/components/newsletter-signup): Email-capture form with idle/sending/sent/error state machine, custom validators, and overridable labels.
- [Number Input](https://ui.vllnt.ai/components/number-input): Numeric input with increment and decrement controls.
- [Password Input](https://ui.vllnt.ai/components/password-input): Password field with a built-in visibility toggle.
- [Scope Selector](https://ui.vllnt.ai/components/scope-selector): Multi-level scope picker for nested environments, teams, and targets.
- [Search Bar](https://ui.vllnt.ai/components/search-bar): Text search input with icon and clear functionality.
- [Segmented Control](https://ui.vllnt.ai/components/segmented-control): Single-choice segmented selector for switching modes, views, or filters.
- [Select](https://ui.vllnt.ai/components/select): Dropdown select input for choosing from a list of options.
- [Tags Input](https://ui.vllnt.ai/components/tags-input): Keyboard-friendly tag editor for adding and removing string values.
- [Timeline Scrubber](https://ui.vllnt.ai/components/timeline-scrubber): Range slider for scrubbing through canvas state playback, with optional milestone ticks.

## Components — Navigation

- [Breadcrumb](https://ui.vllnt.ai/components/breadcrumb): Navigation breadcrumb trail showing the current page hierarchy.
- [Horizontal Scroll Row](https://ui.vllnt.ai/components/horizontal-scroll-row): Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar.
- [Jarvis Dock](https://ui.vllnt.ai/components/jarvis-dock): Floating bottom dock with quick-action buttons + a command-palette trigger.
- [Left Rail](https://ui.vllnt.ai/components/left-rail): Compact vertical rail for canvas modes, tool actions, and secondary navigation controls.
- [Menubar](https://ui.vllnt.ai/components/menubar): Horizontal menu bar with dropdown menus.
- [Navbar SaaS](https://ui.vllnt.ai/components/navbar-saas): SaaS-style navigation bar with branding and links.
- [Navigation Menu](https://ui.vllnt.ai/components/navigation-menu): Accessible navigation menu with links and sub-navigation.
- [Pagination](https://ui.vllnt.ai/components/pagination): Page navigation controls with previous, next, and page links.
- [Right Dock](https://ui.vllnt.ai/components/right-dock): Context dock for inspectors, summaries, and secondary canvas panels.
- [Sidebar](https://ui.vllnt.ai/components/sidebar): Collapsible sidebar navigation layout.
- [Sidebar Provider](https://ui.vllnt.ai/components/sidebar-provider): Context provider for managing sidebar open/close state.
- [Sidebar Toggle](https://ui.vllnt.ai/components/sidebar-toggle): Responsive toggle button for opening and closing the sidebar.
- [Step Navigation](https://ui.vllnt.ai/components/step-navigation): Navigation controls for stepping through multi-page content.
- [Tabs](https://ui.vllnt.ai/components/tabs): Tabbed content panels with keyboard-accessible tab triggers.
- [Top Bar](https://ui.vllnt.ai/components/top-bar): Workspace header bar for titles, leading controls, centered navigation, and trailing actions.
- [View Switcher](https://ui.vllnt.ai/components/view-switcher): URL param-based toggle between named views with pill/tab styling.
- [Viewport Bookmarks](https://ui.vllnt.ai/components/viewport-bookmarks): Saved-view list for the canvas — pinned spatial locations with optional active state.
- [Workspace Switcher](https://ui.vllnt.ai/components/workspace-switcher): Segmented workspace picker for switching between canvas views and operational contexts.
- [World Breadcrumbs](https://ui.vllnt.ai/components/world-breadcrumbs): Spatial trail showing the canvas's current location in a hierarchy of worlds, groups, and runs.

## Components — Overlay

- [Alert Dialog](https://ui.vllnt.ai/components/alert-dialog): Modal dialog for confirming destructive or important actions.
- [Command](https://ui.vllnt.ai/components/command): Command palette with search, groups, and keyboard navigation.
- [Context Menu](https://ui.vllnt.ai/components/context-menu): Right-click context menu with items and submenus.
- [Dialog](https://ui.vllnt.ai/components/dialog): Modal dialog overlay for focused content and actions.
- [Drawer](https://ui.vllnt.ai/components/drawer): Slide-out panel anchored to the screen edge.
- [Dropdown Menu](https://ui.vllnt.ai/components/dropdown-menu): Accessible dropdown menu with items, checkboxes, radio groups, and submenus.
- [Edge Label](https://ui.vllnt.ai/components/edge-label): Inline edge label for relationship semantics such as streams, handoffs, or policies.
- [Hover Card](https://ui.vllnt.ai/components/hover-card): Card that appears on hover for previewing content.
- [Popover](https://ui.vllnt.ai/components/popover): Floating content panel anchored to a trigger element.
- [Sheet](https://ui.vllnt.ai/components/sheet): Slide-over panel from the edge of the screen.
- [Toast](https://ui.vllnt.ai/components/toast): Temporary notification messages with action support.
- [Tooltip](https://ui.vllnt.ai/components/tooltip): Informational popup displayed on hover or focus.
- [Zoom HUD](https://ui.vllnt.ai/components/zoom-hud): Zoom controls with current percentage, increment buttons, and reset action for canvas views.

## Components — Data

- [Activity Heatmap](https://ui.vllnt.ai/components/activity-heatmap): Contribution-style grid for visualizing operational activity over time.
- [Activity Log](https://ui.vllnt.ai/components/activity-log): Paginated activity feed for audit history and analytics changes.
- [Alert](https://ui.vllnt.ai/components/alert): Displays an alert message to the user.
- [Area Chart](https://ui.vllnt.ai/components/area-chart): Renders an area chart for data visualization.
- [Avatar Group](https://ui.vllnt.ai/components/avatar-group): Overlapping avatar stack for participants, assignees, and collaborative contexts.
- [Bar Chart](https://ui.vllnt.ai/components/bar-chart): Renders a bar chart for data visualization.
- [Bottom Activity Strip](https://ui.vllnt.ai/components/bottom-activity-strip): Slim horizontally-scrolling row of recent canvas events for low-noise live activity.
- [Candlestick Chart](https://ui.vllnt.ai/components/candlestick-chart): OHLC financial chart for session-by-session price action.
- [Comparison](https://ui.vllnt.ai/components/comparison): Side-by-side comparison layout for content or features.
- [Countdown Timer](https://ui.vllnt.ai/components/countdown-timer): Countdown and SLA timer for deadlines, escalations, and response windows.
- [Data List](https://ui.vllnt.ai/components/data-list): Semantic key-value metadata layout for displaying labels with values.
- [Data Table](https://ui.vllnt.ai/components/data-table): Enhanced data table with sorting, filtering, selection, and pagination controls.
- [Flow Diagram](https://ui.vllnt.ai/components/flow-diagram): Interactive flow diagram with nodes, edges, and controls.
- [Gantt Chart](https://ui.vllnt.ai/components/gantt-chart): Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales.
- [Heat Overlay](https://ui.vllnt.ai/components/heat-overlay): Heatmap-style overlay drawing soft radial blobs for canvas activity samples.
- [Line Chart](https://ui.vllnt.ai/components/line-chart): Renders a line chart for data visualization.
- [Live Feed](https://ui.vllnt.ai/components/live-feed): Rolling activity stream for surfacing incidents, deploys, and operational signals in real time.
- [Market Treemap](https://ui.vllnt.ai/components/market-treemap): Sector-style market heatmap using weighted tiles and signed performance colors.
- [Metric Cluster](https://ui.vllnt.ai/components/metric-cluster): Compact stack of related metrics pinned to a canvas object's corner.
- [Metric Gauge](https://ui.vllnt.ai/components/metric-gauge): Real-time arc and dial display for monitored percentages and utilization.
- [Mini Map Panel](https://ui.vllnt.ai/components/mini-map-panel): Viewport overview panel showing canvas bounds, markers, and the current zoom window.
- [Order Book](https://ui.vllnt.ai/components/order-book): Level II bid/ask depth ladder with cumulative size bars and spread readout.
- [Presence Stack](https://ui.vllnt.ai/components/presence-stack): Overlapping live-presence avatars with status dots and a sane overflow chip.
- [Presence Sync Indicator](https://ui.vllnt.ai/components/presence-sync-indicator): Compact pill that surfaces live connection + sync health for a collaborative canvas.
- [Progress Bar](https://ui.vllnt.ai/components/progress-bar): Visual progress indicator with labels and completion state.
- [Progress Card](https://ui.vllnt.ai/components/progress-card): Card displaying progress metrics and status.
- [Run Timeline](https://ui.vllnt.ai/components/run-timeline): Multi-lane execution timeline showing run phases over time, with optional cursor.
- [Severity Badge](https://ui.vllnt.ai/components/severity-badge): Operational severity label with tone variants and optional pulse for critical incidents.
- [Sparkline Grid](https://ui.vllnt.ai/components/sparkline-grid): KPI grid of labeled value tiles each paired with a compact sparkline trend.
- [Stat Card](https://ui.vllnt.ai/components/stat-card): Headline KPI card for metrics, trends, and supporting context.
- [Status Board](https://ui.vllnt.ai/components/status-board): Service health grid for surfacing infrastructure state, queue pressure, and incidents.
- [Status Indicator](https://ui.vllnt.ai/components/status-indicator): Compact status label with tone, variant, and activity dot options.
- [Sticky Metric](https://ui.vllnt.ai/components/sticky-metric): Pinned metric pill that sticks to a canvas object's corner.
- [Table](https://ui.vllnt.ai/components/table): Styled data table with header, body, and footer sections.
- [Threshold Ring](https://ui.vllnt.ai/components/threshold-ring): Compact ring gauge expressing how close a value is to a threshold.
- [Ticker Tape](https://ui.vllnt.ai/components/ticker-tape): Marquee-style scrolling symbol tape with price and change badges.
- [Usage Breakdown](https://ui.vllnt.ai/components/usage-breakdown): Ranked resource consumption list with relative share and trend cues.
- [Watchlist](https://ui.vllnt.ai/components/watchlist): Tracked-symbol list with price, change, and advancing/declining summary.
- [World Clock Bar](https://ui.vllnt.ai/components/world-clock-bar): Multi-timezone display for follow-the-sun teams and operational handoffs.

## Components — Data display

- [Choropleth Map](https://ui.vllnt.ai/components/choropleth-map): Standalone SVG choropleth — region polygons shaded by data value with tooltip, legend, and accessible data-table fallback.
- [Chronological Timeline](https://ui.vllnt.ai/components/chronological-timeline): Media-rich, scroll-driven chronological timeline with alternating cards, image/video/audio media, and a progress strip.
- [Floating Toolbar](https://ui.vllnt.ai/components/floating-toolbar): Compact action bar that floats above a selection — primary / ghost / destructive variants.
- [Follow Mode](https://ui.vllnt.ai/components/follow-mode): Follow-mode chrome — outlines a region with a participant's color and surfaces a stop-following chip.
- [Geography Quiz Map](https://ui.vllnt.ai/components/geography-quiz-map): Interactive identify-mode map quiz — click the correct region per prompt with visual feedback, score, and results panel.
- [Globe 3D](https://ui.vllnt.ai/components/globe-3d): Standalone SVG pseudo-3D globe — orthographic projection with auto-rotation, drag interaction, lat/lng markers, and great-circle arcs.
- [Handoff Beacon](https://ui.vllnt.ai/components/handoff-beacon): Attention-routing beacon with pulsing ring and optional source / message card for live canvases.
- [Heat Map Overlay](https://ui.vllnt.ai/components/heat-map-overlay): Standalone SVG geographic heat map — radial-gradient blobs with configurable radius, blur, gradient, and opacity.
- [Historic Timeline](https://ui.vllnt.ai/components/historic-timeline): Specialized timeline for historical events spanning centuries or millennia, with era bands, period bars, and BCE/CE point markers.
- [Interactive Timeline](https://ui.vllnt.ai/components/interactive-timeline): Zoomable, pannable, multi-track timeline with category filter, today marker, and click-to-select events.
- [Map 2D](https://ui.vllnt.ai/components/map-2d): Lightweight 2D map primitive — SVG canvas with equirectangular projection, markers, popups, GeoJSON polygon layers, zoom controls, and an optional backdrop image.
- [Map Timeline](https://ui.vllnt.ai/components/map-timeline): Standalone SVG map + time slider — era polygons and year-pinned events appear as the user scrubs the timeline.
- [Primary Source Viewer](https://ui.vllnt.ai/components/primary-source-viewer): Document viewer for historical primary sources with zoom, rotate, region annotations, transcription panel, and metadata footer.
- [Route Map](https://ui.vllnt.ai/components/route-map): Standalone SVG map with animated route paths, waypoints, and progress indicator. For trade routes, voyages, migrations, delivery tracking.
- [Selection Halo](https://ui.vllnt.ai/components/selection-halo): Local-user selection halo with corner handles + label slot for spatial canvases.
- [Snap Guides](https://ui.vllnt.ai/components/snap-guides): Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag.
- [Story Map](https://ui.vllnt.ai/components/story-map): Standalone SVG scroll-driven narrative map — IntersectionObserver tracks the active chapter and the map shifts to its center + zoom.
- [Tree View](https://ui.vllnt.ai/components/tree-view): Hierarchical tree component for nested data with controlled state, single/multi-select, and keyboard navigation.

## Components — Content

- [Accordion](https://ui.vllnt.ai/components/accordion): Collapsible content sections supporting single or multiple open items.
- [Blog Card](https://ui.vllnt.ai/components/blog-card): Card layout for displaying blog post previews.
- [Callout](https://ui.vllnt.ai/components/callout): Highlighted content block with variant styles for info, warning, danger, and more.
- [Card](https://ui.vllnt.ai/components/card): Container with header, content, and footer sections.
- [Carousel](https://ui.vllnt.ai/components/carousel): Scrollable content carousel with navigation controls.
- [Code Block](https://ui.vllnt.ai/components/code-block): Syntax-highlighted code display with copy support.
- [Code Playground](https://ui.vllnt.ai/components/code-playground): Interactive code editor with live preview.
- [Collapsible](https://ui.vllnt.ai/components/collapsible): Expandable and collapsible content section.
- [Content Intro](https://ui.vllnt.ai/components/content-intro): Introductory section for content pages with title and description.
- [Credit Badge](https://ui.vllnt.ai/components/credit-badge): Balance status pill for credits, wallet states, and billing health.
- [Document Sibling Nav](https://ui.vllnt.ai/components/document-sibling-nav): Newer/older navigator: links to the previous and next item in an ordered series.
- [FAQ](https://ui.vllnt.ai/components/faq): Frequently asked questions section with expandable answers.
- [MDX Content](https://ui.vllnt.ai/components/mdx-content): Renders MDX content with component mapping.
- [Object Card](https://ui.vllnt.ai/components/object-card): Durable object view for agents, runs, artifacts, and tasks inside the canvas.
- [Object Inspector](https://ui.vllnt.ai/components/object-inspector): Right-dock detail header — kind chip, status dot, title/subtitle, with property-section slots.
- [Plan Badge](https://ui.vllnt.ai/components/plan-badge): Subscription tier indicator for pricing, billing, and account summaries.
- [Policy Delivery Panel](https://ui.vllnt.ai/components/policy-delivery-panel): Right-dock panel listing policies / guardrails active for the route or run.
- [Property Section](https://ui.vllnt.ai/components/property-section): Compact key/value grid for inspector panels — labels, sublabels, optional collapse.
- [Relationship Inspector](https://ui.vllnt.ai/components/relationship-inspector): Right-dock panel listing inbound + outbound edges of the focused canvas object.
- [Role Badge](https://ui.vllnt.ai/components/role-badge): Account role indicator for owners, admins, members, and billing contacts.
- [Routing Assignment Panel](https://ui.vllnt.ai/components/routing-assignment-panel): Right-dock panel listing the agent slots an active route dispatches to.
- [Runtime Overview Panel](https://ui.vllnt.ai/components/runtime-overview-panel): Top-of-dock summary tile grid for runtime health when no canvas object is selected.
- [Share Section](https://ui.vllnt.ai/components/share-section): Social sharing buttons and link copy section.
- [Slideshow](https://ui.vllnt.ai/components/slideshow): Step-through slideshow for presenting content sequentially.
- [Subscription Card](https://ui.vllnt.ai/components/subscription-card): Subscription status and management card for plan, renewal, and usage details.
- [Terminal](https://ui.vllnt.ai/components/terminal): Terminal-style display for command output.
- [Timeline](https://ui.vllnt.ai/components/timeline): Vertical or horizontal timeline of sequential events with completed/active/upcoming statuses and connector lines.
- [TLDR Section](https://ui.vllnt.ai/components/tldr-section): Summary section for quick content overview.
- [Video Embed](https://ui.vllnt.ai/components/video-embed): Responsive video embed for YouTube and other providers.
- [Wallet Card](https://ui.vllnt.ai/components/wallet-card): Credit balance display card for available, pending, and refresh details.

## Components — AI

- [Agent Activity](https://ui.vllnt.ai/components/agent-activity): Visual display of an AI agent's execution chain — steps, tools, decisions, progress.
- [AI Artifact](https://ui.vllnt.ai/components/ai-artifact): Rendered output area for AI-generated content with toolbar, copy/edit/download/fullscreen actions, and version chips.
- [AI Sidebar](https://ui.vllnt.ai/components/ai-sidebar): Slide-out AI assistant panel with provider, header / content / footer slots, and a standalone trigger.
- [Model Comparison](https://ui.vllnt.ai/components/model-comparison): Side-by-side comparison of AI model responses with optional blind mode, metadata stats, and a vote bar.
- [Prompt Templates](https://ui.vllnt.ai/components/prompt-templates): Searchable prompt template gallery with category filter, variable fill-in form, and onSelect.

## Components — Educational

- [Civilization Card](https://ui.vllnt.ai/components/civilization-card): Civilization overview with hero band, BCE/CE era timeline, key stats, achievements, and notable leaders.
- [Era Comparison](https://ui.vllnt.ai/components/era-comparison): Side-by-side comparison of historical eras with domain rows, color-themed columns, highlights, and figure chips.
- [Historical Figure Card](https://ui.vllnt.ai/components/historical-figure-card): Profile card with portrait, lifespan timeline, fields, works, quote, connections, and an expandable biography section.
- [Knowledge Check](https://ui.vllnt.ai/components/knowledge-check): Inline knowledge check with multiple-choice / true-false / fill-blank questions, per-answer feedback, and a final score summary.
- [Parallel Timeline](https://ui.vllnt.ai/components/parallel-timeline): Multi-track timeline with shared time axis, BCE/CE event markers, and optional era bands for comparative history.

## Components — Learning

- [AI Chat Input](https://ui.vllnt.ai/components/ai-chat-input): Prompt composer for conversational interfaces with helper text, toolbar actions, and submit states.
- [AI Message Bubble](https://ui.vllnt.ai/components/ai-message-bubble): Chat bubble for assistant, user, tool, and system messages using the current design system surfaces.
- [AI Source Citation](https://ui.vllnt.ai/components/ai-source-citation): Compact source reference card for AI answers with a title, origin label, and optional excerpt.
- [AI Streaming Text](https://ui.vllnt.ai/components/ai-streaming-text): Readable text block for partial assistant output with an optional live cursor while tokens stream in.
- [AI Tool Call Display](https://ui.vllnt.ai/components/ai-tool-call-display): Structured card for tool invocation traces, statuses, serialized input, and returned output.
- [Annotation](https://ui.vllnt.ai/components/annotation): Inline highlight with an attached contextual note.
- [Checklist](https://ui.vllnt.ai/components/checklist): Interactive checklist with progress tracking and toggleable items.
- [Completion Dialog](https://ui.vllnt.ai/components/completion-dialog): Dialog displayed upon completing a task or workflow.
- [Exercise](https://ui.vllnt.ai/components/exercise): Interactive exercise block for learning content.
- [Flashcard](https://ui.vllnt.ai/components/flashcard): Study card for active recall with prompt and answer states.
- [Key Concept](https://ui.vllnt.ai/components/key-concept): Highlighted definition block for key terms and a glossary list.
- [Keyboard Shortcuts Help](https://ui.vllnt.ai/components/keyboard-shortcuts-help): Displays available keyboard shortcuts to the user.
- [Learning Objectives](https://ui.vllnt.ai/components/learning-objectives): Lists learning goals for educational content.
- [Pro Tip](https://ui.vllnt.ai/components/pro-tip): Highlighted tip block with variants for tips, best practices, gotchas, and more.
- [Profile Section](https://ui.vllnt.ai/components/profile-section): User profile display section with avatar and details.
- [Quiz](https://ui.vllnt.ai/components/quiz): Interactive multiple-choice quiz with hints, explanations, and scoring.
- [Rating](https://ui.vllnt.ai/components/rating): Inline star rating for lightweight learner feedback.
- [Search Dialog](https://ui.vllnt.ai/components/search-dialog): Full-screen search dialog with keyboard navigation.
- [Step By Step](https://ui.vllnt.ai/components/step-by-step): Numbered step guide with optional interactive completion tracking.
- [Stepper](https://ui.vllnt.ai/components/stepper): Sequenced steps with complete, current, and upcoming states.
- [Thinking Block](https://ui.vllnt.ai/components/thinking-block): Collapsible block showing AI thinking/reasoning with streaming support.
- [Tour](https://ui.vllnt.ai/components/tour): Guided onboarding flow for introducing content or interface patterns.
- [Tutorial Card](https://ui.vllnt.ai/components/tutorial-card): Card for displaying tutorial previews with metadata.
- [Tutorial Complete](https://ui.vllnt.ai/components/tutorial-complete): Completion screen displayed when a tutorial is finished.
- [Tutorial Filters](https://ui.vllnt.ai/components/tutorial-filters): Filter controls for browsing tutorials by category or difficulty.
- [Tutorial Intro Content](https://ui.vllnt.ai/components/tutorial-intro-content): Introduction section for tutorial pages with overview and prerequisites.
- [Tutorial MDX](https://ui.vllnt.ai/components/tutorial-mdx): MDX renderer tailored for tutorial content with custom components.

## Components — Billing & Plans

- [Auto Reload](https://ui.vllnt.ai/components/auto-reload): Toggle + collapsible threshold/amount form for automatic credit reloading with locale-aware currency.
- [Pricing Table](https://ui.vllnt.ai/components/pricing-table): Plan comparison with feature checklist, tier highlighting, CTA, and an optional monthly/annual toggle.
- [Transaction List](https://ui.vllnt.ai/components/transaction-list): Chronological credit/debit history with locale-aware currency formatting and a pinned subscription row.

## Components — Utility

- [Alert Pulse](https://ui.vllnt.ai/components/alert-pulse): Pulsing ring overlay for alerting canvas objects, with severity tones.
- [Anchor Port](https://ui.vllnt.ai/components/anchor-port): Port marker for object inputs, outputs, and bidirectional links on the canvas.
- [Animated Text](https://ui.vllnt.ai/components/animated-text): Staggered text reveal for headings, pull quotes, and short supporting copy.
- [Aspect Ratio](https://ui.vllnt.ai/components/aspect-ratio): Constrains content to a specified aspect ratio.
- [Border Beam](https://ui.vllnt.ai/components/border-beam): Animated accent beam that travels around the border of a highlighted surface.
- [Canvas Shell](https://ui.vllnt.ai/components/canvas-shell): Layout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions.
- [Canvas View](https://ui.vllnt.ai/components/canvas-view): Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support.
- [Comment Pin](https://ui.vllnt.ai/components/comment-pin): Anchored discussion pin rendered at canvas coordinates with author + unread badge.
- [Connector Edge](https://ui.vllnt.ai/components/connector-edge): Curved edge between canvas objects with optional inline label state.
- [Context Lens](https://ui.vllnt.ai/components/context-lens): Vignette overlay that dims the canvas outside a circular focus region.
- [Floating Action Button](https://ui.vllnt.ai/components/floating-action-button): Fixed-position action button for primary actions.
- [Group Hull](https://ui.vllnt.ai/components/group-hull): Durable boundary wrapper for related runtime objects sharing context or ownership.
- [Infinite Plane](https://ui.vllnt.ai/components/infinite-plane): Tiled pannable backdrop for the canvas with dot or grid pattern that drifts with the viewport.
- [Lang Provider](https://ui.vllnt.ai/components/lang-provider): Context provider for language and internationalization.
- [Live Cursor](https://ui.vllnt.ai/components/live-cursor): Remote user's cursor rendered at canvas coordinates with name + status chip.
- [Marquee](https://ui.vllnt.ai/components/marquee): Continuously scrolling content lane for badges, logos, and status chips.
- [Multi Select Lasso](https://ui.vllnt.ai/components/multi-select-lasso): Selection rectangle overlay for canvas multi-select gestures.
- [Number Ticker](https://ui.vllnt.ai/components/number-ticker): Animated number transitions for stats, KPIs, and compact numeric callouts.
- [Object Handle](https://ui.vllnt.ai/components/object-handle): Drag/reposition affordance for spatial objects that need a calm grab target.
- [Playback Ghost](https://ui.vllnt.ai/components/playback-ghost): Translucent overlay marking where a canvas object was at a previous timestamp during playback.
- [Resizable](https://ui.vllnt.ai/components/resizable): Resizable panel layout with draggable handles.
- [Scroll Area](https://ui.vllnt.ai/components/scroll-area): Custom scrollable area with styled scrollbars.
- [Selection Presence](https://ui.vllnt.ai/components/selection-presence): Dashed-border overlay marking what another user has selected on the canvas.
- [Spinner](https://ui.vllnt.ai/components/spinner): Animated loading spinner indicator.
- [State Badge Overlay](https://ui.vllnt.ai/components/state-badge-overlay): State chip pinned to a canvas object's corner — idle, queued, running, complete, failed, stopped.
- [Table Of Contents](https://ui.vllnt.ai/components/table-of-contents): Auto-generated table of contents from page headings.
- [Table Of Contents Panel](https://ui.vllnt.ai/components/table-of-contents-panel): Side panel rendering a table of contents for page navigation.
- [Theme Provider](https://ui.vllnt.ai/components/theme-provider): Context provider for light/dark theme switching.
- [Theme Toggle](https://ui.vllnt.ai/components/theme-toggle): Button to toggle between light and dark themes.
- [Thread Bubble](https://ui.vllnt.ai/components/thread-bubble): Expanded discussion bubble for an anchored canvas comment thread.