$99 launch price

Components

Dither Gauge

Pro

Customize

<DitherGauge size={220} thresholds={[{"at":0,"colors":["#042f22","#047857","#a7f3d0"]},{"at":70,"colors":["#3c1206","#c2410c","#fed7aa"]},{"at":90,"colors":["#3b0a1f","#be185d","#fbcfe8"]}]} />

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/dither-gauge

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 132 Pro components · lifetime updates.

I have a licenseGet Pro
<DitherGauge
  value={68}
  label="Storage used"
  thresholds={[
    { at: 0, colors: ["#042f22", "#047857", "#a7f3d0"] },
    { at: 70, colors: ["#3c1206", "#c2410c", "#fed7aa"] },
    { at: 90, colors: ["#3b0a1f", "#be185d", "#fbcfe8"] },
  ]}
/>

Use cases

  • Quota and storage

    How much of a plan's storage, seats or API calls are used, turning amber then rose as the cap nears.

  • Goal progress

    Fundraising, sales targets or onboarding completion as a ring that fills in.

  • Uptime and health

    A 30-day uptime figure or a health score on a status page.

  • Hardware readouts

    CPU, memory or battery as a halftone speedometer in a dense dashboard.