@vllnt-ui

Collapsible content sections supporting single or multiple open items.

Contribution-style grid for visualizing operational activity over time.

Paginated activity feed for audit history and analytics changes.

Visual display of an AI agent's execution chain — steps, tools, decisions, progress.

Rendered output area for AI-generated content with toolbar, copy/edit/download/fullscreen actions, and version chips.

Prompt composer for conversational interfaces with helper text, toolbar actions, and submit states.

Chat bubble for assistant, user, tool, and system messages using the current design system surfaces.

Slide-out AI assistant panel with provider, header / content / footer slots, and a standalone trigger.

Compact source reference card for AI answers with a title, origin label, and optional excerpt.

Readable text block for partial assistant output with an optional live cursor while tokens stream in.

Structured card for tool invocation traces, statuses, serialized input, and returned output.

Displays an alert message to the user.

Modal dialog for confirming destructive or important actions.

Pulsing ring overlay for alerting canvas objects, with severity tones.

Port marker for object inputs, outputs, and bidirectional links on the canvas.

Animated gradient beam that connects two elements with a flowing light path.

Decorative grid background with squares that fade in and out at random.

List whose items animate in sequentially with a staggered entrance.

Tabs with a sliding indicator that animates to the active item.

Testimonial carousel with animated transitions between quotes.

Staggered text reveal for headings, pull quotes, and short supporting copy.

Tooltip that animates in on hover or focus with a scale-and-fade.

Inline highlight with an attached contextual note.

Renders an area chart for data visualization.

Constrains content to a specified aspect ratio.

Toggle + collapsible threshold/amount form for automatic credit reloading with locale-aware currency.

Displays a user avatar image with fallback initials.

Overlapping avatar stack for participants, assignees, and collaborative contexts.

Small status label with variant styles.

Full-width announcement bar with variants, dismissal, and an optional action slot.

Renders a bar chart for data visualization.

Responsive bento-style grid layout with feature cards.

Card layout for displaying blog post previews.

Reveals content with a blur-to-sharp transition when it scrolls into view.

Animated accent beam that travels around the border of a highlighted surface.

Slim horizontally-scrolling row of recent canvas events for low-noise live activity.

Slim chrome strip pinned to the bottom of a canvas shell as a calm host for activity strips, status pills, and ambient indicators.

Navigation breadcrumb trail showing the current page hierarchy.

Interactive button with multiple variants and sizes.

Visually connected group of buttons that share borders.

Date picker calendar for selecting dates.

Highlighted content block with variant styles for info, warning, danger, and more.

OHLC financial chart for session-by-session price action.

Layout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions.

Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support.

Container with header, content, and footer sections.

Card that flips in 3D between a front and back face.

Scrollable content carousel with navigation controls.

Filterable category selection for content lists.

Ordered, status-aware visualization of a model's chain of thought with per-step state.

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.

Toggle control for boolean input.

Group of related checkboxes backed by an array of selected values.

Interactive checklist with progress tracking and toggleable items.

Standalone SVG choropleth — region polygons shaded by data value with tooltip, legend, and accessible data-table fallback.

Media-rich, scroll-driven chronological timeline with alternating cards, image/video/audio media, and a progress strip.

Civilization overview with hero band, BCE/CE era timeline, key stats, achievements, and notable leaders.

Syntax-highlighted code display with copy support.

Interactive code editor with live preview.

Expandable and collapsible content section.

Popover color picker with swatches, a hue slider, and a hex input.

Searchable select input for choosing from a list of options.

Command palette with search, groups, and keyboard navigation.

Anchored discussion pin rendered at canvas coordinates with author + unread badge.

Side-by-side comparison layout for content or features.

Dialog displayed upon completing a task or workflow.

Curved edge between canvas objects with optional inline label state.

Introductory section for content pages with title and description.

Vignette overlay that dims the canvas outside a circular focus region.

Right-click context menu with items and submenus.

GitHub-style heatmap of daily activity over time.

Compound component family for AI chat UIs that orchestrates auto-scroll, streaming indicators, empty states, and message rendering.

Dismissible cookie-consent banner with positional variants and accept / reject actions for privacy compliance.

Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook.

Countdown and SLA timer for deadlines, escalations, and response windows.

Balance status pill for credits, wallet states, and billing health.

Course-layout container for a sequence of lessons or modules with title, progress, optional intro, and a stack of lesson rows.

Custom cursor follower that trails the pointer.

Semantic key-value metadata layout for displaying labels with values.

Enhanced data table with sorting, filtering, selection, and pagination controls.

Native date input styled to match the design system.

Single-date picker built with the shared calendar and popover primitives.

Popover calendar for selecting a start and end date.

Modal dialog overlay for focused content and actions.

Oversized hero/display text driven by the display tokens, with an optional reduced-motion-safe reveal.

macOS-style dock whose icons magnify near the pointer.

Newer/older navigator: links to the previous and next item in an ordered series.

Decorative dotted background pattern built from token colors.

Slide-out panel anchored to the screen edge.

Accessible dropdown menu with items, checkboxes, radio groups, and submenus.

Inline edge label for relationship semantics such as streams, handoffs, or policies.

Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes.

Side-by-side comparison of historical eras with domain rows, color-themed columns, highlights, and figure chips.

Interactive exercise block for learning content.

Cards that expand on click to reveal additional content.

Frequently asked questions section with expandable answers.

Layout wrapper pairing a label, control, description, and error message.

Groups related fields under a shared legend.

Dropzone-style file picker with previews for selected files.

Horizontal bar with filter controls for content lists.

Study card for active recall with prompt and answer states.

Fixed-position action button for primary actions.

Floating navigation bar that hides on scroll down and reveals on scroll up.

Compact action bar that floats above a selection — primary / ghost / destructive variants.

Interactive flow diagram with nodes, edges, and controls.

Follow-mode chrome — outlines a region with a participant's color and surfaces a stop-following chip.

Validation wrapper for composing labels, descriptions, controls, and messages.

Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales.

Semicircular gauge for a single value within a range.

Interactive identify-mode map quiz — click the correct region per prompt with visual feedback, score, and results panel.

Frosted-glass card surface with backdrop blur and a translucent background.

Frosted-glass surface for floating chrome above a canvas — dock panels, hovering toolbars, and transient overlays — with a translucent background and soft bord…

Glass-styled progress bar with a translucent track and token-colored fill.

Standalone SVG pseudo-3D globe — orthographic projection with auto-rotation, drag interaction, lat/lng markers, and great-circle arcs.

Responsive CSS grid layout primitive with breakpoint column and gap props.

Durable boundary wrapper for related runtime objects sharing context or ownership.

Attention-routing beacon with pulsing ring and optional source / message card for live canvases.

Semantic heading (h1–h6) with theme-overridable font-family, weight, and size design tokens.

Standalone SVG geographic heat map — radial-gradient blobs with configurable radius, blur, gradient, and opacity.

Heatmap-style overlay drawing soft radial blobs for canvas activity samples.

Specialized timeline for historical events spanning centuries or millennia, with era bands, period bars, and BCE/CE point markers.

Profile card with portrait, lifespan timeline, fields, works, quote, connections, and an expandable biography section.

Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar.

Card that appears on hover for previewing content.

Tiled pannable backdrop for the canvas with dot or grid pattern that drifts with the viewport.

Inline text input with keyboard commit and cancel support.

Text input field for forms.

Groups an input with leading or trailing addons.

One-time password input with segmented fields.

Zoomable, pannable, multi-track timeline with category filter, today marker, and click-to-select events.

Flexible row layout with leading media, content, and trailing actions.

Floating bottom dock with quick-action buttons + a command-palette trigger.

Keyboard key indicator with platform-aware modifier expansion via the shortcut prop.

Highlighted definition block for key terms and a glossary list.

Displays available keyboard shortcuts to the user.

Inline knowledge check with multiple-choice / true-false / fill-blank questions, per-answer feedback, and a final score summary.

Accessible form label that associates descriptive text with an input control.

Context provider for language and internationalization.

Lists learning goals for educational content.

Compact vertical rail for canvas modes, tool actions, and secondary navigation controls.

Renders a line chart for data visualization.

Styled anchor with emphasis variants and an external-link affordance.

Glass surface with an animated liquid gradient sheen.

Accessible single- or multi-select list of options.

Remote user's cursor rendered at canvas coordinates with name + status chip.

Rolling activity stream for surfacing incidents, deploys, and operational signals in real time.

Wrapper that pulls its content toward the pointer for a magnetic effect.

Button that drifts toward the pointer for a magnetic hover effect.

Lightweight 2D map primitive — SVG canvas with equirectangular projection, markers, popups, GeoJSON polygon layers, zoom controls, and an optional backdrop ima…

Standalone SVG map + time slider — era polygons and year-pinned events appear as the user scrubs the timeline.

Sector-style market heatmap using weighted tiles and signed performance colors.

Continuously scrolling content lane for badges, logos, and status chips.

Renders MDX content with component mapping.

Horizontal menu bar with dropdown menus.

Decorative meteor shower of streaks falling across the background.

Static measurement bar (role=meter) for a known range, with optional segments.

Compact stack of related metrics pinned to a canvas object's corner.

Real-time arc and dial display for monitored percentages and utilization.

Viewport overview panel showing canvas bounds, markers, and the current zoom window.

Side-by-side comparison of AI model responses with optional blind mode, metadata stats, and a vote bar.

Dropdown selector for choosing AI models.

Popover-based multi-selection input with selected-value badges and optional search.

Selection rectangle overlay for canvas multi-select gestures.

Styled wrapper around the native select element.

SaaS-style navigation bar with branding and links.

Accessible navigation menu with links and sub-navigation.

Email-capture form with idle/sending/sent/error state machine, custom validators, and overridable labels.

Numeric input with increment and decrement controls.

Animated number transitions for stats, KPIs, and compact numeric callouts.

Durable object view for agents, runs, artifacts, and tasks inside the canvas.

Drag/reposition affordance for spatial objects that need a calm grab target.

Right-dock detail header — kind chip, status dot, title/subtitle, with property-section slots.

Level II bid/ask depth ladder with cumulative size bars and spread readout.

Grid of overview cards for at-a-glance dashboards — a row of headline metrics with consistent spacing and tone.

Page navigation controls with previous, next, and page links.

Bordered, titled content surface with header, body, and footer slots.

Multi-track timeline with shared time axis, BCE/CE event markers, and optional era bands for comparative history.

Floating particle field that drifts gently in the background.

Password field with a built-in visibility toggle.

Phone number input with a country dialing-code selector.

Proportional pie or donut chart for part-to-whole comparisons.

Subscription tier indicator for pricing, billing, and account summaries.

Translucent overlay marking where a canvas object was at a previous timestamp during playback.

Right-dock panel listing policies / guardrails active for the route or run.

Floating content panel anchored to a trigger element.

Overlapping live-presence avatars with status dots and a sane overflow chip.

Compact pill that surfaces live connection + sync health for a collaborative canvas.

Plan comparison with feature checklist, tier highlighting, CTA, and an optional monthly/annual toggle.

Document viewer for historical primary sources with zoom, rotate, region annotations, transcription panel, and metadata footer.

Highlighted tip block with variants for tips, best practices, gotchas, and more.

User profile display section with avatar and details.

Visual progress indicator with labels and completion state.

Card displaying progress metrics and status.

Curriculum-level learning dashboard for modules, lessons, exercises, streaks, and earned skills.

Progressive blur overlay that fades focus toward one edge.

Auto-growing prompt textarea with a submit affordance and optional toolbar slot.

Searchable prompt template gallery with category filter, variable fill-in form, and onSelect.

Compact key/value grid for inspector panels — labels, sublabels, optional collapse.

Long-form content wrapper that styles raw HTML descendants with the token-driven type scale.

Renders a QR code from a string value as a theme-aware SVG.

Interactive multiple-choice quiz with hints, explanations, and scoring.

Spider chart comparing several metrics on shared axes.

Group of radio buttons for single-selection input.

Calendar that selects a start and end date as a range.

Inline star rating for lightweight learner feedback.

Collapsible AI reasoning trace with streaming support and ordered or free-form steps.

Right-dock panel listing inbound + outbound edges of the focused canvas object.

Resizable panel layout with draggable handles.

Reveals text with a directional slide-and-fade when it enters the viewport.

Context dock for inspectors, summaries, and secondary canvas panels.

Account role indicator for owners, admins, members, and billing contacts.

Standalone SVG map with animated route paths, waypoints, and progress indicator. For trade routes, voyages, migrations, delivery tracking.

Right-dock panel listing the agent slots an active route dispatches to.

Multi-lane execution timeline showing run phases over time, with optional cursor.

Top-of-dock summary tile grid for runtime health when no canvas object is selected.

Flow diagram showing weighted links between nodes.

Multi-level scope picker for nested environments, teams, and targets.

Scrambles characters then resolves them into the final text.

Custom scrollable area with styled scrollbars.

Fixed bar that tracks reading progress down the page.

Text search input with icon and clear functionality.

Full-screen search dialog with keyboard navigation.

Search input with a leading icon and a clear button.

Single-choice segmented selector for switching modes, views, or filters.

Dropdown select input for choosing from a list of options.

Local-user selection halo with corner handles + label slot for spatial canvases.

Dashed-border overlay marking what another user has selected on the canvas.

Visual divider between content sections.

Operational severity label with tone variants and optional pulse for critical incidents.

Modal dialog for sharing a page across social platforms with a copy-link action and overridable labels.

Social sharing buttons and link copy section.

Slide-over panel from the edge of the screen.

Button with a light sheen that sweeps across its surface.

Text with a bright light band that sweeps across it.

Wrapper that draws an animated gradient border around its content.

Button with a glossy gradient sheen that sweeps on a loop.

Collapsible sidebar navigation layout.

Context provider for managing sidebar open/close state.

Responsive toggle button for opening and closing the sidebar.

Placeholder loading animation for content.

Range slider input for selecting numeric values.

Step-through slideshow for presenting content sequentially.

Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag.

Decorative twinkling sparkles scattered behind content.

KPI grid of labeled value tiles each paired with a compact sparkline trend.

Animated loading spinner indicator.

Text laid out in a circle that rotates continuously.

Card with a radial spotlight that follows the pointer.

Headline KPI card for metrics, trends, and supporting context.

State chip pinned to a canvas object's corner — idle, queued, running, complete, failed, stopped.