VLLNT UI · Famille de composants
Composants Data
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 storiesLisible par les agents
Votre agent IA peut aussi les installer.
Le registre est expose comme donnees structurees, afin que les agents de code choisissent le bon composant sans scraper le HTML.
Questions frequentes
- 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.