Gauge

Display a single metric value with automatic color changes based on configurable thresholds.

Live Preview

Gauge · live system metrics
CPU52%
███████████░░░░░░░░░░░
MEM79%
█████████████████░░░░░
NET41%
█████████░░░░░░░░░░░░░
● All systems nominal

~/my-cli — node v22● running

Installation

npx inkui add gauge

Usage

import { Gauge } from './components/ui/gauge';
 
export default function App() {
  return (
    <>
      <Gauge value={62} label="CPU   " variant="bar" />
      <Gauge value={88} label="Memory" variant="bar" />
      <Gauge value={45} variant="ring" label="Disk Usage" width={12} />
    </>
  );
}

Variants

bar — horizontal progress bar (default)
arc — ASCII art semicircular arc
ring — full ASCII ring/circle

Default Color Thresholds

Range	Color
0–60%	success (green)
60–80%	warning (yellow)
80–100%	error (red)

API Reference

Prop	Type	Default	Description
`value`	`number`	—	Current value (required)
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`label`	`string`	—	Display label
`unit`	`string`	`'%'`	Value unit suffix
`variant`	`'arc' \| 'bar' \| 'ring'`	`'bar'`	Visual style
`colorStops`	`[number, string][]`	—	Custom color thresholds
`width`	`number`	`20`	Width in columns
`showValue`	`boolean`	`true`	Show numeric value
`theme`	`InkUITheme`	`darkTheme`	Color theme

Installation

Usage

Variants

Default Color Thresholds

API Reference

On this page