Components

19 components extracted from the Prometheus UI codebase.

Figma Plugin

A bootstrap plugin generates all variables, text styles, and component scaffolds in Figma. Download figma-plugin.zip (11 KB) — unzip, import via Plugins → Development → Import plugin from manifest, and run.

CodeBlock

Syntax-highlighted code display container with codebox background.

Data Display

DataTable

Generic sortable data table with custom cell renderers.

Data Display

EmptyState

Centered empty state with icon, message, and optional action.

Utility

EndpointLink

Scrape endpoint URL display with query parameter badges.

Data Display

ErrorAlert

Standardized alert for error, warning, and info messages.

Utility

FilterToolbar

Unified filter bar with search, state filter, and optional collapse button.

Filters

HealthPanel

Accordion item with health-state colored left border. Resolves AlertsPage/RulesPage inconsistency.

Status & Health

InfoCard

Card with icon + title header for status/info pages.

Layout

InfoPageLayout

Centered, max-width page layout wrapper for info pages.

Layout

KeyValueTable

Two-column key-value display for build info, runtime info, flags.

Data Display

LabelBadge

Performance-optimized metric label pills using plain spans.

Labels

NavButton

Header navigation link with active state.

Navigation

PoolAccordion

Accordion for scrape pool / target group display.

Domain

PrometheusAppShell

Application layout shell with always-dark header.

Layout

SeriesName

Metric label set display with optional clickable copy-to-clipboard.

Data Display

SettingsPanel

Popover panel for user settings (checkboxes, numbers).

Utility

StateMultiSelect

Colored pill multi-select for state/health filtering.

Filters

StatusBadge

Unified health/state badge. Accepts any status vocabulary (firing, up, ok, etc.).

Status & Health

ThemeToggle

Cycles light → dark → auto color scheme.

Utility