Skip to content

Interactive Answers

Tick Gauge

A meter drawn as ticks around an arc, with a target marker and the shortfall to it in red — success rates, SLOs, budgets.

2 variantsMIT

Preview

Tool call success

warehouse.query · last 24 h

Below SLO
93.1%

412 of 5,980 failed

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/tick-gauge.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { StatusPill } from "@/components/ui/status-pill";
import { TickGauge } from "@/components/ui/tick-gauge";

export function SuccessRate({ ok, total }: { ok: number; total: number }) {
  const rate = ok / total;
  return (
    <TickGauge
      title="Tool call success"
      subtitle="warehouse.query · last 24 h"
      value={rate}
      target={0.99}
      targetLabel="SLO 99%"
      caption={`${total - ok} of ${total} failed`}
      aside={<StatusPill tone={rate >= 0.99 ? "positive" : "negative"}>{rate >= 0.99 ? "Within SLO" : "Below SLO"}</StatusPill>}
    />
  );
}

Props

PropTypeDefaultDescription
value*number—Current value, 0–1.
title*string—Header title.
subtitlestring—Secondary line under the title.
targetnumber—Goal, 0–1. Ticks between the value and the target turn red.
targetLabelstring—Label under the right end of the arc.
captionstring—Line under the big number.
format(value: number) => string—Formats the big number. Defaults to a percent with one decimal.
ticksnumber44Number of ticks on the arc.
asideReactNode—Right side of the header, e.g. a status pill.
classNamestring—Extra classes for the root element.
// Exposed as role="meter" with the value, caption and target in aria-valuetext.
// Ticks fill in order on mount; later values recolor them in place.