Spark UI
EV Range Widgets

Customize

Accent Color
Battery Level
18
Km Per Percent
1.9
Charging
Charger Distance
Charger Location
Distance To Turn
900
Street Name
Speed Limit
55
Film Grain
Animation Speed
100

EV Range Widgets

Widgets
310 views•95 uses

Props

11 properties
accentColorcolor#ff3b30
Battery fill and route glow.
batteryLevelnumber18
Starting charge percentage.
kmPerPercentnumber1.9
Range added per percent of charge.
chargingbooleantrue
Animate the battery charging up.
chargerDistancestring12km
Distance pill for the nearest charger.
chargerNamestringNess Ave, San Fra…
Nearest charger address.
distancenumber900
Starting distance in meters.
streetNamestringNess Ave
Street for the next turn.
speedLimitnumber55
Speed limit badge.
showGrainbooleantrue
Overlay a subtle noise texture.
speednumber100
Speed of all animations.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add ev-range-widgets

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

Two frosted-glass EV dashboard widgets: a charging card with a 20-cell glowing battery and charge-limit marker, and a live follow-camera navigation map with a floating turn pill, heading beam and trip bar.

KEY FEATURES

  • ·Battery cells light up in a staggered spring as the car charges, with the active cell pulsing and a charge-limit marker
  • ·Hero percentage and range count up live; time-to-limit, charge rate and stall availability update alongside
  • ·Navigation follows a real route on the street grid: the map translates and rotates so your heading stays up, slowing into corners
  • ·Floating manoeuvre pill shows the real next turn, distance and street; ETA, remaining time and distance come from the route
  • ·Puck marker with a heading beam, glowing route that is consumed as you drive, film grain and blur-in entrance