Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add gauge

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Pro Component — This component requires an Aura UI Pro license.

Need a progress ring instead? Use the free Radial Progress for 0–100% progress. The Gauge is for an arbitrary [min, max] range with threshold colors.

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.

Basic Usage

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

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.

Examples

Size Variants

65 Small
65 Medium
65 Large 
<div class="flex items-end gap-8">
    <x-aura::gauge :value="65" label="Small" size="sm" />
    <x-aura::gauge :value="65" label="Medium" size="md" />
    <x-aura::gauge :value="65" label="Large" size="lg" />
</div>
<x-aura::gauge :value="65" label="Small" size="sm" />
<x-aura::gauge :value="65" label="Medium" size="md" />
<x-aura::gauge :value="65" label="Large" size="lg" />

Threshold Colors

The arc color changes automatically as the value crosses each threshold boundary. Thresholds are evaluated in ascending from order; the highest matching threshold wins.

30°C Temperature
75°C Temperature
100°C Temperature 
<div class="flex items-center gap-8">
    <x-aura::gauge
        :value="30"
        label="Temperature"
        unit="°C"
        :min="0"
        :max="120"
        :thresholds="[
            ['from' => 60, 'color' => 'warning'],
            ['from' => 90, 'color' => 'danger'],
        ]"
    />
    <x-aura::gauge
        :value="75"
        label="Temperature"
        unit="°C"
        :min="0"
        :max="120"
        :thresholds="[
            ['from' => 60, 'color' => 'warning'],
            ['from' => 90, 'color' => 'danger'],
        ]"
    />
    <x-aura::gauge
        :value="100"
        label="Temperature"
        unit="°C"
        :min="0"
        :max="120"
        :thresholds="[
            ['from' => 60, 'color' => 'warning'],
            ['from' => 90, 'color' => 'danger'],
        ]"
    />
</div>
<x-aura::gauge
    :value="30"
    label="Temperature"
    unit="°C"
    :min="0"
    :max="120"
    :thresholds="[
        ['from' => 60, 'color' => 'warning'],
        ['from' => 90, 'color' => 'danger'],
    ]"
/>

Arbitrary Range

3800 RPM
-5°C Temp 
<div class="flex items-center gap-8">
    <x-aura::gauge :value="3800" :min="0" :max="8000" label="RPM" color="info" />
    <x-aura::gauge :value="-5" :min="-20" :max="40" label="Temp" unit="°C" color="primary" />
</div>
<x-aura::gauge :value="3800" :min="0" :max="8000" label="RPM" color="info" />
<x-aura::gauge :value="-5" :min="-20" :max="40" label="Temp" unit="°C" color="primary" />

Without Value Label

Storage 
<x-aura::gauge :value="55" label="Storage" unit="%" :showValue="false" color="warning" size="md" />
<x-aura::gauge :value="55" label="Storage" unit="%" :showValue="false" color="warning" size="md" />

Accessibility

  • The root element uses role="meter" with aria-valuenow, aria-valuemin, and aria-valuemax derived from :value, :min, and :max.
  • The label prop is rendered as a visible text element centered over the gauge (with the value) and also surfaced in aria-label so screen readers announce both the label and the current value.
  • Color transitions driven by thresholds are supplemented by the numeric value so that color is never the sole indicator of state.