shadcn.io is not affiliated with official shadcn/ui
EV Charging Map Block for Radix UI
A charge planner on a drawn street map: choose a connector and a battery, set a two-thumb charge window, and rank eight charging stops by cost or by time, with the free bays in words.
Installation
Overview
Help drivers plan the stop before the trip, with this EV charging map for React with Radix UI. Plugvale, a charging network, draws the invented town of Ebbsworth as an SVG street map with a river and a rail line, and eight charging stops as pills. A Native Select picks the connector (CCS, Type 2 or CHAdeMO), another the battery (40, 60, 77 or 100 kWh), and a two-thumb Slider sets where the charge starts and stops, from 20 to 80 percent to begin with. That gives the energy to add. Each stop that has the connector says on its pin how long the charge takes, which is the energy over the lower of the car's rate and the stop's rate, and in its table row what it costs at its tariff, with the free bays in words ("2 of 6 free", or "Full"). A Toggle Group ranks the rows by Cheapest or Fastest, and the first row's pin turns solid. A stop without your connector stays on the map, hidden, and leaves the table. A polite status line speaks the result once the controls settle. It's built from Native Select, Slider, Toggle Group and Guides, with a CSS entrance only. For charging networks, fleet apps and trip planners.
FAQ
How do I list my own stops?
Edit STOP_LINES. Each line is an id, a name, a position in the drawing's 480 by 360 units, the number of bays, the free bays, the tariff in cents a kWh and the rate in kW for CCS, Type 2 and CHAdeMO, with 0 meaning the stop has no such connector. In your app fill the free bays from your network's status feed and keep the formulas as they are.
How are time and cost worked out?
The energy to add is the battery size times the charge window. The rate is the lower of the car's rate for that connector (120 kW for CCS, 11 for Type 2, 50 for CHAdeMO, typed in CONNECTORS) and the stop's rate. The time is the energy over that rate and the cost is the energy times the stop's tariff, in integer cents. It ignores the way a real battery slows near full, so treat it as a sketch, not a promise.
How do I use the two-thumb slider from the keyboard?
Each thumb is a slider of its own, named "Arrive at" and "Leave at" with its value in percent, and takes the arrow keys in steps of 5. The thumbs can meet, and then the plan adds 0.0 kWh and every time and cost reads zero.
Why does a pin disappear when I change the connector?
Stops without the connector are hidden, not removed, so the rest of the map stays where it was. They are also skipped by the keyboard and left out of the table, which is the text route to every stop that fits. The heading above the table counts them.
What stays local in the demo, and how do I wire it up?
All of it. The stops, tariffs and free bays are invented sample data, the map is a drawing and nothing is booked, started or paid. Choosing a row only marks its pin. In your app make the stop's name open its page and start the session from there.