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.
Bar Chart
Renders a bar chart for data visualization.
Line Chart
Renders a line chart for data visualization.
Pie Chart
Proportional pie or donut chart for part-to-whole comparisons.
3 storiesRadar Chart
Spider chart comparing several metrics on shared axes.
2 storiesGauge Chart
Semicircular gauge for a single value within a range.
3 storiesSankey Chart
Flow diagram showing weighted links between nodes.
1 storyFlow Diagram
Interactive flow diagram with nodes, edges, and controls.
1 storyMarket & 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.
3 storiesOrder Book
Level II bid/ask depth ladder with cumulative size bars and spread readout.
3 storiesMarket Treemap
Sector-style market heatmap using weighted tiles and signed performance colors.
2 storiesTicker Tape
Marquee-style scrolling symbol tape with price and change badges.
2 storiesWatchlist
Tracked-symbol list with price, change, and advancing/declining summary.
3 storiesTables & 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.
1 storyTable
Styled data table with header, body, and footer sections.
1 storyData List
Semantic key-value metadata layout for displaying labels with values.
2 storiesUsage Breakdown
Ranked resource consumption list with relative share and trend cues.
3 storiesComparison
Side-by-side comparison layout for content or features.
2 storiesMetrics & 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.
2 storiesMetric Cluster
Compact stack of related metrics pinned to a canvas object's corner.
4 storiesMetric Gauge
Real-time arc and dial display for monitored percentages and utilization.
2 storiesSticky Metric
Pinned metric pill that sticks to a canvas object's corner.
4 storiesThreshold Ring
Compact ring gauge expressing how close a value is to a threshold.
4 storiesSparkline Grid
KPI grid of labeled value tiles each paired with a compact sparkline trend.
2 storiesOverview Board
Grid of overview cards for at-a-glance dashboards — a row of headline metrics with consistent spacing and tone.
1 storyProgress Bar
Visual progress indicator with labels and completion state.
1 storyProgress Card
Card displaying progress metrics and status.
1 storyStatus & 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.
3 storiesStatus Indicator
Compact status label with tone, variant, and activity dot options.
2 storiesSeverity Badge
Operational severity label with tone variants and optional pulse for critical incidents.
5 storiesAlert
Displays an alert message to the user.
2 storiesCountdown Timer
Countdown and SLA timer for deadlines, escalations, and response windows.
2 storiesPresence Sync Indicator
Compact pill that surfaces live connection + sync health for a collaborative canvas.
4 storiesActivity & 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.
3 storiesActivity Log
Paginated activity feed for audit history and analytics changes.
2 storiesContribution Graph
GitHub-style heatmap of daily activity over time.
2 storiesLive Feed
Rolling activity stream for surfacing incidents, deploys, and operational signals in real time.
2 storiesBottom Activity Strip
Slim horizontally-scrolling row of recent canvas events for low-noise live activity.
4 storiesRun Timeline
Multi-lane execution timeline showing run phases over time, with optional cursor.
4 storiesHeat Overlay
Heatmap-style overlay drawing soft radial blobs for canvas activity samples.
4 storiesGantt Chart
Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales.
4 storiesMini Map Panel
Viewport overview panel showing canvas bounds, markers, and the current zoom window.
1 storyWorld Clock Bar
Multi-timezone display for follow-the-sun teams and operational handoffs.
3 storiesAvatar Group
Overlapping avatar stack for participants, assignees, and collaborative contexts.
2 storiesPresence Stack
Overlapping live-presence avatars with status dots and a sane overflow chip.
4 storiesReadable by agents
Your AI agent can install these too.
The registry is exposed as structured data, so coding agents pick the right component without scraping HTML.
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.