Laravel Gauge Component

Pro

SVG arc gauge for displaying a value within an arbitrary numeric range, with optional threshold-based color transitions.

A Gauge built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::gauge>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Gauge is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::gauge :value="72" label="CPU Usage" unit="%" />

See the full API, props and live examples in the Gauge documentation.

Overview

The Gauge renders a 270° arc SVG gauge that fills proportionally from min to max. Unlike the free Radial Progress, the Gauge accepts arbitrary numeric ranges (e.g., −20 to 120 °C, 0 to 1000 RPM) and supports threshold-based color transitions — the arc color changes automatically when the value crosses a configurable boundary. Three sizes are available (sm, md, lg), and the center value display can be hidden when the surrounding context already shows the number.

Props

Prop	Type	Default	Description
`value`	`int\|float`	`0`	Current value to display. Clamped to `[min, max]`.
`min`	`int\|float`	`0`	Minimum of the range.
`max`	`int\|float`	`100`	Maximum of the range. Must be greater than `min`.
`label`	`string\|null`	`null`	Text label rendered below the value inside the arc.
`unit`	`string\|null`	`null`	Unit string appended to the displayed value (e.g., `'%'`, `'°C'`).
`color`	`string`	`'primary'`	Base arc color token: `primary`, `success`, `danger`, `warning`, `info`.
`thresholds`	`array`	`[]`	Array of `['from' => float, 'color' => string]` objects. The highest matching threshold overrides `color`.
`size`	`string`	`'md'`	Gauge size: `sm` (96 px), `md` (140 px), or `lg` (180 px).
`showValue`	`bool`	`true`	Show the numeric value in the center of the arc.