Kilowatt: Home energy landing page template for Next.js.

$39one-time payment

Buy Kilowatt Live demo

Or get all 49 templates for $149

Next.js 16
CSS
TypeScript
11 sections
Light
No API keys
Palette
Updated Oct 28, 2026

hairlineui.com/demo/kilowattLive demo

The first screen of the Kilowatt landing page template

01Overview

At a glance

A complete landing page for Kilowatt, a hub and app that decide every half hour where a home's energy goes: solar into the battery or the house, the battery back to the grid at the evening peak, the car and the heat pump onto the cheapest hours. The page lives through one day in one house, and every figure on it comes from a single model of that day.

Made for

Home batteries, solar, inverter and EV-charging products
Smart tariffs, heat pumps, smart-home hubs and virtual power plants
Installer, fleet and energy-management software

An isometric house whose energy flows reroute as you drag the sun through 24 hours
Tomorrow's half-hour prices as a pinned skyline, with the battery's plan in front
A power cut on a street at night and twelve homes selling to the grid together
One day model behind every number, with a content check that keeps the copy honest

02The look

Its own palette and type

The colours and type it ships with. Tap a colour to copy it.

AaSpace GroteskIncluded with the template
The quick brown fox jumps over the lazy dog
0123456789
AaRethink SansIncluded with the template
The quick brown fox jumps over the lazy dog
0123456789

Space Grotesk at 600 for display and figures, with Rethink Sans for reading. A cool grey page framed by two rails and full-width rules with square nodes, content in hairline cells. Every drawing is isometric SVG in three greys with ink outlines. One signal colour, solar amber, means your own energy (made by your panels or held in your battery) and nothing else; grid energy is ink. A night band for the power cut and the close. Flat buttons, squared corners.

03Sections

11 sections, in page order

From the first screen to the footer.

01
Hero
The headline beside an isometric house with panels, battery, heat pump and car, energy running along its wires. Drag the sun across 24 hours (or use the keyboard) and the flows, lit panels, battery level, labels and the readout of time, price, solar, battery, grid and the day's saving all follow. It opens at the visitor's local time.
02
Proof
Three figures in cells, then six installer wordmarks.
03
Tomorrow
Pinned under the menu: tomorrow's 48 half-hour prices as a grey isometric skyline with the battery's level in amber in front. Scrolling walks through the day, filling the hours as it goes, and the panel says what the plan is doing at each one.
04
Devices
Six cells, each device doing its job: panels under a passing cloud, battery cells filling, the car on its cable, the heat pump's fan, the meter running backwards, the hot-water tank warming. Each loops only on screen.
05
Backup
A night band: the grid fails on a street of five houses, four go dark and one stays lit on its battery, while the outage timer counts and the event log fills in.
06
Installers
Twelve homes on a block. Send the street to the grid and their batteries light in turn, the totals climb, and when the last one sends, the page's own frame nodes light amber.
07
How it works
Three steps with their times beside the app screen in a phone.
08
Households, pricing and FAQ
Three quotes, each with its own small isometric home and a before and after figure; the hub drawn on the wall beside the meter with its price and specs, then three plans; questions beside a sticky head.
09
Closing
The same house at night, windows lit, running on its battery.
10
Footer
Link columns, then the wordmark and its battery mark across the width.
11
Pages
A contact page whose form is laid out as cells of the grid, privacy and terms placeholders, and a 404 where the house stands dark: Power cut.

04Make it yours

Where everything lives

Every heading, paragraph, plan and destination lives in site.config.ts. The day the page acts out (tariff, solar, battery, car, heat pump, the plan and the money) is in data/day.ts, and npm run verify:content prints what it says and flags any sentence that no longer matches.

Where to change each part of Kilowatt
To change	Edit
Brand, copy, stats, devices, quotes, plans, FAQ and links	site.config.ts
The day: prices, solar, battery, car, heat pump and the plan	data/day.ts
The street of homes and what the network pays	data/street.ts
The hero house and its wires	lib/house.ts
The other drawings: skyline, devices, street, hub	lib/scenes.ts
Sign-up, installer and contact endpoint	site.config.ts → links
Palette, type and the frame	styles/base.css, app/layout.tsx
Section order	app/page.tsx

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Replace the fictional company, households, installers and figures. Set links.signup, links.installers and links.contactEndpoint (or keep the email fallback), each plan's checkout link and site.url in site.config.ts, and shape data/day.ts to your own tariff and hardware.

05Specifications

What’s under the hood

sections: 11
source files: 48
lines of code: ~5,400
dependencies: 3
API keys needed: 0

Stack

Framework: Next.js 16 (App Router), React 19
Language: TypeScript
Styling: CSS with design tokens and component styles
Dependencies: nextreactreact-dom

Design

Fonts: Space Grotesk, Rethink Sans, self-hosted with next/font
Images: No photos. One app screen as WebP (48 KB). The house, skyline, devices, streets, hub, small homes, mark and icons are all drawn in code as isometric SVG.
Colour scheme: Light
Responsive: Desktop, tablet and phone

Quality

Accessibility: Skip link, visible focus, keyboard navigation, reduced motion
API keys and environment variables: None
Node.js: 20.9 or newer

Shipping

Deploys to: Vercel, Netlify, Cloudflare Pages or any Node host
Codebase: 48 source files, about 5,400 lines
Last updated: Oct 28, 2026

06License

One license, no tiers

The full text ships as LICENSE.md in the download and is on the license page.

You can

Use it for your own products
Use it for any number of client projects
Change the code and design however you like
Deploy the result commercially

You can’t

Resell or share the files as a template, theme or UI kit
Publish the source as a template in a public repository

07Questions

Before you buy

What do I get when I buy Kilowatt?

The complete Kilowatt project as a download: the Next.js app, its config file, a README with setup and customisation notes, and the license. It’s added to your account’s library the moment payment goes through.

Can I use Kilowatt for client projects?

Yes. One purchase covers your own products and any number of client projects, and you can change the code however you like. What you can’t do is resell or share the template files themselves as a template or UI kit.

Do I need API keys, a database or a backend?

No. It runs with npm install and npm run dev and deploys to Vercel, Netlify or Cloudflare Pages without any environment variables.

What should I change before I launch?

Do I need to know Next.js?

Basic React helps, but most changes are text edits in site.config.ts. The README walks through colours, fonts and section order.

How do updates work?

Updates to Kilowatt are free. When a new version ships, download it again from your library.

Can I get a refund?

Yes. If Kilowatt isn’t right for you, email support@hairlineui.com within 14 days and you get your money back. No reason needed.

Should I buy all-access instead?

If you’ll use more than two templates, yes. All-access is $149 for all 49 templates, including Kilowatt and every template added later. Three single templates would cost $117.

08All-access