VLLNT UI · Component family

Data components

Browse the Data components currently implemented for the Native renderer.

Tables & Lists

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

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

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

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

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 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

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

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.