Hafenstraße 12
Hamburg
CCS · 150 kWTyp2 · 22 kW
<DgButton />
/* voltgrid */ → ui-kit
VoltGrid UI Kit
A few primitives (button, tag, window) compose into domain components like the station card, and those into full screens. In the composer below you can assemble the dashboard yourself.
// the building blocks, as they appear on the page
<DgTag />
● frei● lädt● wartung
<VgStatTile />
active sessions
312
+12 %
<VgStationCard /> ← composed from DgTag + DgButton
● frei
<VgLoadChart />
netzlast · 24h
4,2 MW peak
// the composer, build your own dashboard
Click blocks on the left and they appear on the canvas. Hover a block to move it up/down or remove it. The component code below writes itself as you build.
canvas (4)
Page header
/* voltgrid */ operator dashboard
Network Overview
KPI row
active sessions
312
+12 %
stations in network
2.418
+38
uptime 30d
99,2 %
−0,1 %
Load curve
netzlast · 24h
4,2 MW peak
Station card
Hafenstraße 12
Hamburg
CCS · 150 kWTyp2 · 22 kW
<template> <VgPageHead title="…" /> <VgStatTile v-for="kpi in kpis" … /> <VgLoadChart :series="load24h" /> <VgStationCard :station="station" /> </template>
// The same primitives (DgButton, DgTag, DgWindow) power this entire portfolio site · built once, consistent everywhere.