Charging Widget
Circular battery indicator with animated liquid waves that rise as the percentage counts up, looping continuously.
WidgetsFramer MotionSVG
Add to your project
One command adds this component to your project.
1
Run the following command:
npx shadcn@latest add "https://aicanvas.me/r/charging-widget.json"2
For dark mode, add the dark class to your <html> element:
<html class="dark">3
This component uses Manrope. Add it to your project:
Optional<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
