Battery Card

Cards 55

About

Battery Card A visually polished component to display device battery status, featuring a dynamic, animated liquid-fill effect that reflects the current charge level.

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

Code

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

Usage.tsx

import * as React from "react";
import { BatteryCard } from "@/components/ui/battery-card"; // Adjust the import path
import { Laptop } from "lucide-react";

const BatteryCardDemo = () => {
  const [batteryLevel, setBatteryLevel] = React.useState(55);

  // Effect to simulate battery charging for demonstration purposes
  React.useEffect(() => {
    const interval = setInterval(() => {
      setBatteryLevel((prevLevel) => {
        const newLevel = prevLevel + 1;
        // Reset when it reaches 100
        return newLevel > 100 ? 20 : newLevel;
      });
    }, 800); // Update every 800ms

    // Clean up the interval on component unmount
    return () => clearInterval(interval);
  }, []);
  
  // Format the remaining time based on battery level
  const formatTime = (level: number) => {
    if (level >= 100) return "Charged";
    const remainingPercentage = 100 - level;
    const minutesRemaining = Math.round(remainingPercentage * 1.5); // Simple estimation logic
    const hours = Math.floor(minutesRemaining / 60);
    const minutes = minutesRemaining % 60;

    if (hours > 0) {
      return `${hours}h ${minutes}m`;
    }
    return `${minutes}m`;
  };

  return (
    <div className="flex items-center justify-center bg-background p-10">
      <BatteryCard
        deviceName="Josh MacBook"
        deviceIcon={<Laptop className="h-4 w-4" />}
        batteryLevel={batteryLevel}
        isCharging={true}
        timeToFull={formatTime(batteryLevel)}
        estimateLabel="Time to full charge"
      />
    </div>
  );
};

export default BatteryCardDemo;