Components
31 components derived from the Prometheus v3 web UI. Grouped by category; complex components first.
Data-Display
Sortable Table
Variant of Table with up/down chevron icons stacked in each <th>. Clicking the header sorts. Currently only on /flags.
mediumSyntax Highlighted Code
highlight.js tokenization over YAML. Keys (hljs-attr) and string literals (hljs-string) — today these colors swap semantic meaning between l…
mediumYAML Code Block
Mantine CodeHighlight rendering the Prometheus YAML config on /config. 16px mono, transparent bg in light / dark bg in dark.
simpleHealth Status Badge
Pill-shaped UP / DOWN badge. UP = green.1 bg / green.8 text (light); swapped in dark. DOWN = red family. Uppercase, bold.
simpleInline Code
Bare <code> inside table cells on /tsdb-status and /flags. Currently browser-default monospace with no bg/padding/border. Should migrate to …
simpleKey-Value Table
Two-column table with a bold label column and a value column. Used for Build/Runtime info (system fields) and Top-N label stats (monospace f…
simpleLabel Badge
Pill-shaped key=value badge for labels. Gray bg / dark text (light theme); inverted in dark. Not uppercased. Used on /targets, /service-disc…
simpleLink
Mantine Anchor / plain <a>. Brand-blue color, no underline by default. Used for endpoint URLs on /targets and 'show relabeling' disclosure o…
simpleStats Badge
Gray pill with a leading icon used for 'last scrape' duration and 'N ms ago' timestamps. Same palette as Label Badge.
simpleStatus Indicator
Small ~16px SVG circle next to a pool-level 'N/M up' counter. Filled green (ok) or red (error). Pure visual — no text.
simpleTable
Mantine Table used on /status and /tsdb-status. 14px th (bold) + 14px td, 7px 10px cell padding, visible bottom border between rows.
Feedback
Empty State
Empty-state messaging implemented as a Mantine Alert Info Callout. Title + body pair — today the body often restates the title, which is the…
simpleMantine Alert Info Callout
Mantine Alert with color='blue'. Translucent brand-blue background, brand-blue icon and title, body in primary text color. Used for info cal…
Input
Date Picker
Mantine DateTimePicker for /query evaluation time, flanked by previous/next ActionIcons for fast stepping.
complexText Input
Expression editor input on /query — CodeMirror-backed single-line field with leading options menu and trailing Execute slot.
mediumFilter Input (Pills)
Multi-select filter built on Mantine PillsInput + Combobox. Selected values render as pills inside the field; placeholder shows when empty. …
simpleCopy Button
Mantine ActionIcon pinned top-right of a code block. aria-label='Copy code'. Inherits Icon Button chrome.
simpleIcon Button
Mantine ActionIcon. In the header uses a gray fill; in content areas uses a transparent fill with a colored glyph. Used for theme toggle, se…
simplePrimary Button
Solid brand-blue button for the single most important action on a page. 'Execute' on /query is the canonical instance.
simpleSearch Input
Leading-icon text input used for client-side filtering. 'Filter by rule name or labels', 'Filter by endpoint or labels', 'Filter by flag nam…
simpleSecondary Button
Lower-emphasis variant. Transparent background with brand-blue label. 'Add query' on /query is the canonical instance.
simpleSelect
Mantine Combobox/Select — single-value picker with trailing chevron. Used for 'Select scrape pool' on /targets and /service-discovery.
Layout
Accordion
Mantine Accordion per scrape pool. Each item has a 5px-solid colored left border — green when all children are UP, red when any child is DOW…
simpleCard
Mantine Card surface. 1px gray border, 4px radius, 16px padding, subtle 2-layer drop-shadow. Container for Build/Runtime info, Alertmanager …
simpleCard Title with Icon
Card heading with a leading Tabler icon. Used on /status ('Build information', 'Runtime information') and /alertmanager-discovery ('Active A…
simpleCard Title without Icon
Plain-text card heading used on /tsdb-status — 'TSDB Head Status', 'Top 10 label names…'. Non-canonical; should migrate to Card Title with I…
Navigation
Header
Fixed global top bar. Hosts the brand mark, primary nav buttons, and utility ActionIcons (theme toggle, settings, docs).
simpleBreadcrumb
On Status sub-pages, the active Navbar button expands to 'Status › Target health' style trail. Rendered inside the same header slot as the S…
simpleNavbar
The three top-level nav buttons inside the header — Query, Alerts, Status. Active state uses solid brand-blue fill; inactive is transparent …
simpleTab Control
Mantine Tabs — flat, underline-style. /query's Table / Graph / Explain. Active tab has a 2px brand-blue underline; inactive tabs are underli…