VLLNT UI · Component family

Data components

Data components turn records into something readable — sortable tables, lists, charts, metrics, gauges, and live status boards. Feed them your data and they handle filtering, formatting, and layout.

Charts & Graphs

Area, bar, line, pie, radar, gauge, sankey, and flow charts for visualizing any dataset.

Area Chart

Renders an area chart for data visualization. Install Area Chart from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
View component

Bar Chart

Renders a bar chart for data visualization. Install Bar Chart from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
View component

Line Chart

Renders a line chart for data visualization. Install Line Chart from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
View component

Pie Chart

Proportional pie or donut chart for part-to-whole comparisons. Install Pie Chart from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

Radar Chart

Spider chart comparing several metrics on shared axes. Install Radar Chart from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Gauge Chart

Semicircular gauge for a single value within a range. Install Gauge Chart from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

Sankey Chart

Flow diagram showing weighted links between nodes. Install Sankey Chart from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Flow Diagram

Interactive flow diagram with nodes, edges, and controls. Install Flow Diagram from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Market & Trading

Candlestick charts, order books, treemaps, ticker tapes, and watchlists for financial and market data.

Candlestick Chart

OHLC financial chart for session-by-session price action. Install Candlestick Chart from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

Order Book

Level II bid/ask depth ladder with cumulative size bars and spread readout. Install Order Book from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

Market Treemap

Sector-style market heatmap using weighted tiles and signed performance colors. Install Market Treemap from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Ticker Tape

Marquee-style scrolling symbol tape with price and change badges. Install Ticker Tape from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Watchlist

Tracked-symbol list with price, change, and advancing/declining summary. Install Watchlist from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

Tables & Lists

Sortable data tables, key-value lists, and side-by-side comparisons for structured records.

Data Table

Enhanced data table with sorting, filtering, selection, and pagination controls. Install Data Table from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Table

Styled data table with header, body, and footer sections. Install Table from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView 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

Usage Breakdown

Ranked resource consumption list with relative share and trend cues. Install Usage Breakdown from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

Comparison

Side-by-side comparison layout for content or features. Install Comparison from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Metrics & KPIs

Stat cards, metric gauges, sparklines, progress bars, and overview boards for headline metrics and dashboards.

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

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

Metric Gauge

Real-time arc and dial display for monitored percentages and utilization. Install Metric Gauge from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
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

Threshold Ring

Compact ring gauge expressing how close a value is to a threshold. Install Threshold Ring from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Sparkline Grid

KPI grid of labeled value tiles each paired with a compact sparkline trend. Install Sparkline Grid from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 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

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

Status & Signals

Status boards, indicators, severity badges, alerts, and timers for real-time operational health.

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

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

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

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

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

Activity & Presence

Activity feeds, heatmaps, timelines, live streams, and presence avatars for monitoring what is happening and who is online.

Activity Heatmap

Contribution-style grid for visualizing operational activity over time. Install Activity Heatmap from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
3 storiesView component

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

Contribution Graph

GitHub-style heatmap of daily activity over time. Install Contribution Graph from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
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

Bottom Activity Strip

Slim horizontally-scrolling row of recent canvas events for low-noise live activity. Install Bottom Activity Strip from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Run Timeline

Multi-lane execution timeline showing run phases over time, with optional cursor. Install Run Timeline from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Heat Overlay

Heatmap-style overlay drawing soft radial blobs for canvas activity samples. Install Heat Overlay from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Gantt Chart

Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales. Install Gantt Chart from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Mini Map Panel

Viewport overview panel showing canvas bounds, markers, and the current zoom window. Install Mini Map Panel from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView 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

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

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

Frequently asked

What's in the data family?
Tables and data tables, lists, charts, metrics, gauges, status boards, and activity feeds — the surfaces that read, filter, and summarize records.