Energy Meter

Component 77

About

A segmented energy/power level meter with animated staggered fill, an animated percentage counter, and color-coded critical/warning states in a Tron-style HUD panel.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Energy Meter to your project and fits it to your theme.

Code

How Energy Meter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { EnergyMeter } from "@/components/ui/energy-meter";

export default function EnergyMeterDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-8">
      <div className="grid w-full max-w-sm gap-4">
        <EnergyMeter value={82} label="Reactor Output" showValue />
        <EnergyMeter value={54} label="Shield Integrity" showValue />
        <EnergyMeter value={18} label="Power Reserve" showValue />
      </div>
    </div>
  );
}