Skip to content
codexa

Dashboards · React

Home solar energy

Solar generation against household use, battery and grid export, and a daily log for a rooftop system.

Use this templateRemix
Home solar energy starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A dark energy dashboard for a 6.4 kW rooftop solar system with a home battery: monthly generation against household use, where this month's solar went, and a daily log with the weather. Readings live in src/dashboard.ts, ready to connect to your inverter's API.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/dash-solar

Explorer 13

src/dashboard.ts
src/dashboard.ts
import type { Dashboard } from "./types"; /** Everything this dashboard shows. Edit freely. */export const dashboard: Dashboard = {  "brand": "Sunwell",  "user": {    "name": "Ruth Calloway",    "role": "14 Orchard Row"  },  "nav": [    {      "label": "Overview",      "icon": "sun",      "href": "#overview"    },    {      "label": "Generation",      "icon": "chart",      "href": "#trends"    },    {      "label": "Energy flow",      "icon": "bolt",      "href": "#breakdown"    },    {      "label": "Daily log",      "icon": "calendar",      "href": "#table"    },    {      "label": "System",      "icon": "wrench",      "href": "#activity"    }  ],  "title": "Your solar",  "subtitle": "6.4 kW rooftop system · 10 kWh battery · September 2026",  "ranges": [    {      "label": "6M",      "points": 6    },    {      "label": "12M",      "points": 12    }  ],  "kpis": [    {      "label": "Generated (Sep)",      "value": "690 kWh",      "delta": "19.8%",      "up": false    },    {      "label": "Self-powered",      "value": "74%",      "delta": "6 pts",      "up": false    },    {      "label": "Exported to grid",      "value": "296 kWh",      "delta": "41 kWh",      "up": false    },    {      "label": "Last 12 months",      "value": "7,390 kWh",      "delta": "3.1%",      "up": true    }  ],  "chart": {    "title": "Generated vs used (kWh)",    "type": "bar",    "labels": [      "Oct",      "Nov",      "Dec",      "Jan",      "Feb",      "Mar",      "Apr",      "May",      "Jun",      "Jul",      "Aug",      "Sep"    ],    "series": [      {        "name": "Generated",        "values": [          520,          330,          240,          260,          380,          590,          760,          880,          930,          950,          860,          690        ]      },      {        "name": "Used",        "values": [          610,          680,          760,          740,          650,          590,          520,          490,          540,          600,          580,          530        ]      }    ]  },  "side": {    "title": "Where September's solar went",    "items": [      {        "label": "Used in the home",        "value": "290 kWh",        "pct": 42      },      {        "label": "Charged the battery",        "value": "104 kWh",        "pct": 15      },      {        "label": "Exported to grid",        "value": "296 kWh",        "pct": 43      }    ]  },  "table": {    "title": "Daily log",    "columns": [      "Date",      "Generated",      "Used",      "Exported",      "Weather"    ],    "statusColumn": 4,    "tones": {      "Sunny": "good",      "Partly cloudy": "accent",      "Overcast": "neutral",      "Rain": "warn"    },    "rows": [      [        "Sep 30",        "26.8 kWh",        "16.9 kWh",        "11.2 kWh",        "Sunny"      ],      [        "Sep 29",        "24.1 kWh",        "17.4 kWh",        "9.0 kWh",        "Sunny"      ],      [        "Sep 28",        "14.6 kWh",        "18.8 kWh",        "3.1 kWh",        "Partly cloudy"      ],      [        "Sep 27",        "7.9 kWh",        "19.6 kWh",        "0.4 kWh",        "Rain"      ],      [        "Sep 26",        "10.3 kWh",        "18.1 kWh",        "1.6 kWh",        "Overcast"      ],      [        "Sep 25",        "22.7 kWh",        "16.5 kWh",        "8.8 kWh",        "Sunny"      ],      [        "Sep 24",        "18.9 kWh",        "17.2 kWh",        "6.3 kWh",        "Partly cloudy"      ]    ]  },  "feed": {    "title": "System",    "items": [      {        "text": "Battery reached full charge at 13:20",        "time": "Today"      },      {        "text": "All 16 panels reporting normal output",        "time": "Daily check, 06:00"      },      {        "text": "Inverter firmware updated to 3.8.2",        "time": "Sep 18"      }    ]  }};

Remix

Remix this template

Describe what to change and the agent starts from Home solar energy's files. The box is already started for you: finish “Start from Home solar energy and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on Home solar energy

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates