Gauges are top level visual indicators useful for calling attention to things like preview builds, performance metrics, bundle sizes, and more.


Gauges appear in the top left corner of branches once setup.


import { Gauge, Icons } from "pierre";

const gauge = new Gauge("Docs", {
	icon: Icons.Trash,
	color: "red",
	description: "How bad is jacob at writing docs?",

export default async () => {
	// run some numbers
		value: 0.9, // real bad

Gauges require an “identifier string” and the following optional interface:

export default class Gauge {
	constructor(name: string, props: GaugeProps = {})

export interface GaugeProps {
  // themeable color
  color?: Color;

  // visual icon
  icon?: Icons;

  // number value (between 0-1);
  value?: number;

  // small label shown beneath a gauge
  label?: string;

  // description shown on hover
  description?: string;

  // link to an external asset or preview
  href?: string;

Icon and colors come from the Pierre design system. While not open sourced, you can use any color or icon from the system by name. Head to the Pierre Styleguide to find a list of colors and see all available icons.

Pierre is the product engineering tool

Code hosting, review, docs, and CI. One place for product engineers and their teams to focus on what they do best—building products.

Join the Waitlist
Skip the line! Join our Discord for early access
On this page