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.
Bar Chart
Renders a bar chart for data visualization. Install Bar Chart from the VLLNT UI registry with the shadcn CLI.
Line Chart
Renders a line chart for data visualization. Install Line Chart from the VLLNT UI registry with the shadcn CLI.
Pie Chart
Proportional pie or donut chart for part-to-whole comparisons. Install Pie Chart from the VLLNT UI registry with the shadcn CLI.
3 storiesRadar Chart
Spider chart comparing several metrics on shared axes. Install Radar Chart from the VLLNT UI registry with the shadcn CLI.
2 storiesGauge Chart
Semicircular gauge for a single value within a range. Install Gauge Chart from the VLLNT UI registry with the shadcn CLI.
3 storiesSankey Chart
Flow diagram showing weighted links between nodes. Install Sankey Chart from the VLLNT UI registry with the shadcn CLI.
1 storyFlow Diagram
Interactive flow diagram with nodes, edges, and controls. Install Flow Diagram from the VLLNT UI registry with the shadcn CLI.
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. Install Candlestick Chart from the VLLNT UI registry with the shadcn CLI.
3 storiesOrder 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.
3 storiesMarket Treemap
Sector-style market heatmap using weighted tiles and signed performance colors. Install Market Treemap from the VLLNT UI registry with the shadcn CLI.
2 storiesTicker Tape
Marquee-style scrolling symbol tape with price and change badges. Install Ticker Tape from the VLLNT UI registry with the shadcn CLI.
2 storiesWatchlist
Tracked-symbol list with price, change, and advancing/declining summary. Install Watchlist from the VLLNT UI registry with the shadcn CLI.
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. Install Data Table from the VLLNT UI registry with the shadcn CLI.
1 storyTable
Styled data table with header, body, and footer sections. Install Table from the VLLNT UI registry with the shadcn CLI.
1 storyData List
Semantic key-value metadata layout for displaying labels with values. Install Data List from the VLLNT UI registry with the shadcn CLI.
2 storiesUsage Breakdown
Ranked resource consumption list with relative share and trend cues. Install Usage Breakdown from the VLLNT UI registry with the shadcn CLI.
3 storiesComparison
Side-by-side comparison layout for content or features. Install Comparison from the VLLNT UI registry with the shadcn CLI.
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. Install Stat Card from the VLLNT UI registry with the shadcn CLI.
2 storiesMetric 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.
4 storiesMetric Gauge
Real-time arc and dial display for monitored percentages and utilization. Install Metric Gauge from the VLLNT UI registry with the shadcn CLI.
2 storiesSticky Metric
Pinned metric pill that sticks to a canvas object's corner. Install Sticky Metric from the VLLNT UI registry with the shadcn CLI.
4 storiesThreshold 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.
4 storiesSparkline 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.
2 storiesOverview 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.
1 storyProgress Bar
Visual progress indicator with labels and completion state. Install Progress Bar from the VLLNT UI registry with the shadcn CLI.
1 storyProgress Card
Card displaying progress metrics and status. Install Progress Card from the VLLNT UI registry with the shadcn CLI.
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. Install Status Board from the VLLNT UI registry with the shadcn CLI.
3 storiesStatus Indicator
Compact status label with tone, variant, and activity dot options. Install Status Indicator from the VLLNT UI registry with the shadcn CLI.
2 storiesSeverity 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.
5 storiesAlert
Displays an alert message to the user. Install Alert from the VLLNT UI registry with the shadcn CLI.
2 storiesCountdown Timer
Countdown and SLA timer for deadlines, escalations, and response windows. Install Countdown Timer from the VLLNT UI registry with the shadcn CLI.
2 storiesPresence 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.
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. Install Activity Heatmap from the VLLNT UI registry with the shadcn CLI.
3 storiesActivity Log
Paginated activity feed for audit history and analytics changes. Install Activity Log from the VLLNT UI registry with the shadcn CLI.
2 storiesContribution Graph
GitHub-style heatmap of daily activity over time. Install Contribution Graph from the VLLNT UI registry with the shadcn CLI.
2 storiesLive 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.
2 storiesBottom 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.
4 storiesRun 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.
4 storiesHeat Overlay
Heatmap-style overlay drawing soft radial blobs for canvas activity samples. Install Heat Overlay from the VLLNT UI registry with the shadcn CLI.
4 storiesGantt 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.
4 storiesMini 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.
1 storyWorld 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.
3 storiesAvatar Group
Overlapping avatar stack for participants, assignees, and collaborative contexts. Install Avatar Group from the VLLNT UI registry with the shadcn CLI.
2 storiesPresence 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.
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.