VLLNT UI

Components

Explore all 171 components available in the library.

Core

Avatar

Displays a user avatar image with fallback initials. Install Avatar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Badge

Small status label with variant styles. Install Badge from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Banner

Full-width announcement bar with variants, dismissal, and an optional action slot. Install Banner from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
6 storiesView component

Button

Accessible React button with variants, sizes, and full keyboard support — install from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
9 storiesView component

Checkbox

Toggle control for boolean input. Install Checkbox from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Copy Button

Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook. Install Copy Button from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Empty State

Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes. Install Empty State from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Grid

Responsive CSS grid layout primitive with breakpoint column and gap props. Install Grid from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Heading

Semantic heading (h1–h6) with theme-overridable font-family, weight, and size design tokens. Install Heading from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Input

Text input field for forms. Install Input from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Label

Accessible form label that associates descriptive text with an input control. Install Label from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Link

Styled anchor with emphasis variants and an external-link affordance. Install Link from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Meter

Static measurement bar (role=meter) for a known range, with optional segments. Install Meter from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Panel

Bordered, titled content surface with header, body, and footer slots. Install Panel from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Radio Group

Group of radio buttons for single-selection input. Install Radio Group from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Separator

Visual divider between content sections. Install Separator from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Skeleton

Placeholder loading animation for content. Install Skeleton from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Slider

Range slider input for selecting numeric values. Install Slider from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Switch

Toggle switch control for binary on/off state. Install Switch from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Text

Body-text primitive with token-driven sans family and a size/tone/weight scale; polymorphic via `as`. Install Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Textarea

Multi-line text input field. Install Textarea from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Toggle

Two-state toggle button. Install Toggle from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Toggle Group

Group of toggle buttons for single or multiple selection. Install Toggle Group from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Toolbar

Horizontal control group (role=toolbar) with arrow-key roving focus and separators. Install Toolbar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Form

Button Group

Visually connected group of buttons that share borders. Install Button Group from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Calendar

Date picker calendar for selecting dates. Install Calendar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Category Filter

Filterable category selection for content lists. Install Category Filter from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Checkbox Group

Group of related checkboxes backed by an array of selected values. Install Checkbox Group from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Color Picker

Popover color picker with swatches, a hue slider, and a hex input. Install Color Picker from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Combobox

Searchable select input for choosing from a list of options. Install Combobox from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Date Field

Native date input styled to match the design system. Install Date Field from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Date Picker

Single-date picker built with the shared calendar and popover primitives. Install Date Picker from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Date Range Picker

Popover calendar for selecting a start and end date. Install Date Range Picker from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Field

Layout wrapper pairing a label, control, description, and error message. Install Field from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Fieldset

Groups related fields under a shared legend. Install Fieldset from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

File Upload

Dropzone-style file picker with previews for selected files. Install File Upload from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Filter Bar

Horizontal bar with filter controls for content lists. Install Filter Bar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Form

Validation wrapper for composing labels, descriptions, controls, and messages. Install Form from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Inline Input

Inline text input with keyboard commit and cancel support. Install Inline Input from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Input Group

Groups an input with leading or trailing addons. Install Input Group from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Input OTP

One-time password input with segmented fields. Install Input OTP from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Item

Flexible row layout with leading media, content, and trailing actions. Install Item from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

List Box

Accessible single- or multi-select list of options. Install List Box from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Multi Select

Popover-based multi-selection input with selected-value badges and optional search. Install Multi Select from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Native Select

Styled wrapper around the native select element. Install Native Select from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Number Input

Numeric input with increment and decrement controls. Install Number Input from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Password Input

Password field with a built-in visibility toggle. Install Password Input from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Phone Input

Phone number input with a country dialing-code selector. Install Phone Input from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Range Calendar

Calendar that selects a start and end date as a range. Install Range Calendar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Search Bar

Text search input with icon and clear functionality. Install Search Bar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Search Field

Search input with a leading icon and a clear button. Install Search Field from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Segmented Control

Single-choice segmented selector for switching modes, views, or filters. Install Segmented Control from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Select

Dropdown select input for choosing from a list of options. Install Select from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Tag Group

Set of tags supporting selection and removal. Install Tag Group from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Tags Input

Keyboard-friendly tag editor for adding and removing string values. Install Tags Input from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Text Field

Labelled text input bundling description and error message. Install Text Field from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Time Field

Native time input styled to match the design system. Install Time Field from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Time Picker

Popover time selector built from hour and minute columns. Install Time Picker from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Timeline Scrubber

Range slider for scrubbing through canvas state playback, with optional milestone ticks. Install Timeline Scrubber from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Overlay

Alert Dialog

Modal dialog for confirming destructive or important actions. Install Alert Dialog from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Command

Command palette with search, groups, and keyboard navigation. Install Command from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Context Menu

Right-click context menu with items and submenus. Install Context Menu from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Dialog

Modal dialog overlay for focused content and actions. Install Dialog from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Drawer

Slide-out panel anchored to the screen edge. Install Drawer from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Dropdown Menu

Accessible dropdown menu with items, checkboxes, radio groups, and submenus. Install Dropdown Menu from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Popover

Floating content panel anchored to a trigger element. Install Popover from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Share Dialog

Modal dialog for sharing a page across social platforms with a copy-link action and overridable labels. Install Share Dialog from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Sheet

Slide-over panel from the edge of the screen. Install Sheet from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Toast

Temporary notification messages with action support. Install Toast from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Tooltip

Informational popup displayed on hover or focus. Install Tooltip from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Navigation

Animated Tabs

Tabs with a sliding indicator that animates to the active item. Install Animated Tabs from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Bottom Bar

Slim chrome strip pinned to the bottom of a canvas shell as a calm host for activity strips, status pills, and ambient indicators. Install Bottom Bar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Breadcrumb

Navigation breadcrumb trail showing the current page hierarchy. Install Breadcrumb from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Horizontal Scroll Row

Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar. Install Horizontal Scroll Row from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Menubar

Horizontal menu bar with dropdown menus. Install Menubar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Navigation Menu

Accessible navigation menu with links and sub-navigation. Install Navigation Menu from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Pagination

Page navigation controls with previous, next, and page links. Install Pagination from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Sidebar

Collapsible sidebar navigation layout. Install Sidebar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Sidebar Provider

Context provider for managing sidebar open/close state. Install Sidebar Provider from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Sidebar Toggle

Responsive toggle button for opening and closing the sidebar. Install Sidebar Toggle from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Step Navigation

Navigation controls for stepping through multi-page content. Install Step Navigation from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Tabs

Tabbed content panels with keyboard-accessible tab triggers. Install Tabs from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Top Bar

Workspace header bar for titles, leading controls, centered navigation, and trailing actions. Install Top Bar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

View Switcher

URL param-based toggle between named views with pill/tab styling. Install View Switcher from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Workspace Switcher

Segmented workspace picker for switching between canvas views and operational contexts. Install Workspace Switcher from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Data

Activity Log

Paginated activity feed for audit history and analytics changes. Install Activity Log from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Alert

Displays an alert message to the user. Install Alert from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Avatar Group

Overlapping avatar stack for participants, assignees, and collaborative contexts. Install Avatar Group from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Countdown Timer

Countdown and SLA timer for deadlines, escalations, and response windows. Install Countdown Timer from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Data List

Semantic key-value metadata layout for displaying labels with values. Install Data List from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Live Feed

Rolling activity stream for surfacing incidents, deploys, and operational signals in real time. Install Live Feed from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Metric Cluster

Compact stack of related metrics pinned to a canvas object's corner. Install Metric Cluster from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Overview Board

Grid of overview cards for at-a-glance dashboards — a row of headline metrics with consistent spacing and tone. Install Overview Board from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Presence Stack

Overlapping live-presence avatars with status dots and a sane overflow chip. Install Presence Stack from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Presence Sync Indicator

Compact pill that surfaces live connection + sync health for a collaborative canvas. Install Presence Sync Indicator from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Progress Bar

Visual progress indicator with labels and completion state. Install Progress Bar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Progress Card

Card displaying progress metrics and status. Install Progress Card from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Severity Badge

Operational severity label with tone variants and optional pulse for critical incidents. Install Severity Badge from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
5 storiesView component

Stat Card

Headline KPI card for metrics, trends, and supporting context. Install Stat Card from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Status Board

Service health grid for surfacing infrastructure state, queue pressure, and incidents. Install Status Board from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Status Indicator

Compact status label with tone, variant, and activity dot options. Install Status Indicator from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Sticky Metric

Pinned metric pill that sticks to a canvas object's corner. Install Sticky Metric from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

World Clock Bar

Multi-timezone display for follow-the-sun teams and operational handoffs. Install World Clock Bar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Data Display

Floating Toolbar

Compact action bar that floats above a selection — primary / ghost / destructive variants. Install Floating Toolbar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Glass Progress

Glass-styled progress bar with a translucent track and token-colored fill. Install Glass Progress from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Interactive Timeline

Zoomable, pannable, multi-track timeline with category filter, today marker, and click-to-select events. Install Interactive Timeline from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Scroll Progress

Fixed bar that tracks reading progress down the page. Install Scroll Progress from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Tree View

Hierarchical tree component for nested data with controlled state, single/multi-select, and keyboard navigation. Install Tree View from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Content

Accordion

Collapsible content sections supporting single or multiple open items. Install Accordion from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Animated List

List whose items animate in sequentially with a staggered entrance. Install Animated List from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Animated Testimonials

Testimonial carousel with animated transitions between quotes. Install Animated Testimonials from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Blur Reveal

Reveals content with a blur-to-sharp transition when it scrolls into view. Install Blur Reveal from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Callout

Highlighted content block with variant styles for info, warning, danger, and more. Install Callout from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Card

Container with header, content, and footer sections. Install Card from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Carousel

Scrollable content carousel with navigation controls. Install Carousel from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Code Block

Syntax-highlighted code display with copy support. Install Code Block from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Collapsible

Expandable and collapsible content section. Install Collapsible from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Content Intro

Introductory section for content pages with title and description. Install Content Intro from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Credit Badge

Balance status pill for credits, wallet states, and billing health. Install Credit Badge from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Document Sibling Nav

Newer/older navigator: links to the previous and next item in an ordered series. Install Document Sibling Nav from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
6 storiesView component

Expandable Cards

Cards that expand on click to reveal additional content. Install Expandable Cards from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

FAQ

Frequently asked questions section with expandable answers. Install FAQ from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Plan Badge

Subscription tier indicator for pricing, billing, and account summaries. Install Plan Badge from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Reveal Text

Reveals text with a directional slide-and-fade when it enters the viewport. Install Reveal Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Role Badge

Account role indicator for owners, admins, members, and billing contacts. Install Role Badge from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Scramble Text

Scrambles characters then resolves them into the final text. Install Scramble Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Share Section

Social sharing buttons and link copy section. Install Share Section from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Shimmer Text

Text with a bright light band that sweeps across it. Install Shimmer Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Slideshow

Step-through slideshow for presenting content sequentially. Install Slideshow from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Spinning Text

Text laid out in a circle that rotates continuously. Install Spinning Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Terminal

Terminal-style display for command output. Install Terminal from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Text Animate

Animates text in by word or character with configurable effects. Install Text Animate from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Text Reveal

Dims and brightens words as the text scrolls through the viewport. Install Text Reveal from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Text Shimmer

Text with an animated gradient fill that shimmers. Install Text Shimmer from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

TLDR Section

Summary section for quick content overview. Install TLDR Section from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Typewriter

Types text out character by character with a blinking cursor. Install Typewriter from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

AI

Agent Activity

Visual display of an AI agent's execution chain — steps, tools, decisions, progress. Install Agent Activity from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

AI Artifact

Rendered output area for AI-generated content with toolbar, copy/edit/download/fullscreen actions, and version chips. Install AI Artifact from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

AI Chat Input

Prompt composer for conversational interfaces with helper text, toolbar actions, and submit states. Install AI Chat Input from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

AI Message Bubble

Chat bubble for assistant, user, tool, and system messages using the current design system surfaces. Install AI Message Bubble from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

AI Source Citation

Compact source reference card for AI answers with a title, origin label, and optional excerpt. Install AI Source Citation from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

AI Streaming Text

Readable text block for partial assistant output with an optional live cursor while tokens stream in. Install AI Streaming Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

AI Tool Call Display

Structured card for tool invocation traces, statuses, serialized input, and returned output. Install AI Tool Call Display from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Chain of Thought

Ordered, status-aware visualization of a model's chain of thought with per-step state. Install Chain of Thought from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Conversation Thread

Compound component family for AI chat UIs that orchestrates auto-scroll, streaming indicators, empty states, and message rendering. Install Conversation Thread from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Model Selector

Dropdown selector for choosing AI models. Install Model Selector from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Prompt Input

Auto-growing prompt textarea with a submit affordance and optional toolbar slot. Install Prompt Input from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Reasoning

Collapsible AI reasoning trace with streaming support and ordered or free-form steps. Install Reasoning from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Thinking Block

Collapsible block showing AI thinking/reasoning with streaming support. Install Thinking Block from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Learning

Checklist

Interactive checklist with progress tracking and toggleable items. Install Checklist from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Completion Dialog

Dialog displayed upon completing a task or workflow. Install Completion Dialog from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Exercise

Interactive exercise block for learning content. Install Exercise from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Flashcard

Study card for active recall with prompt and answer states. Install Flashcard from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Keyboard Shortcuts Help

Displays available keyboard shortcuts to the user. Install Keyboard Shortcuts Help from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Progress Tracker

Curriculum-level learning dashboard for modules, lessons, exercises, streaks, and earned skills. Install Progress Tracker from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Quiz

Interactive multiple-choice quiz with hints, explanations, and scoring. Install Quiz from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Rating

Inline star rating for lightweight learner feedback. Install Rating from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Search Dialog

Full-screen search dialog with keyboard navigation. Install Search Dialog from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Step By Step

Numbered step guide with optional interactive completion tracking. Install Step By Step from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Stepper

Sequenced steps with complete, current, and upcoming states. Install Stepper from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Tour

Guided onboarding flow for introducing content or interface patterns. Install Tour from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Tutorial Complete

Completion screen displayed when a tutorial is finished. Install Tutorial Complete from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Tutorial Filters

Filter controls for browsing tutorials by category or difficulty. Install Tutorial Filters from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Utility

Animated Text

Staggered text reveal for headings, pull quotes, and short supporting copy. Install Animated Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
12 storiesView component

Aspect Ratio

Constrains content to a specified aspect ratio. Install Aspect Ratio from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Floating Action Button

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

Supported platforms:WebNative
1 storyView component

Marquee

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

Supported platforms:WebNative
5 storiesView component

Number Ticker

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

Supported platforms:WebNative
2 storiesView component

Resizable

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

Supported platforms:WebNative
1 storyView component

Spinner

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

Supported platforms:WebNative
1 storyView component

Truncated Text

Single-line text that truncates with an ellipsis when it exceeds a configurable max width. Install Truncated Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Don't see what you need?

Request a new component and we'll open a prefilled GitHub issue with the right labels and template.

Request a component