Skip to content
UI Kit
Accent color

Solar company website sections

For solar installers and energy companies. A savings estimate with a drawn roof, the steps to commissioning, buying, financing and funding, system packages and the live yield.

5 variants
Switch category

From the roof to the first kilowatt hour

Homeowners ask a solar installer two things, what it saves and how much work it is. These sections answer with an estimate on a drawn roof, the steps from consultation to commissioning and the choice between buying, financing and renting. After the installation, the live yield keeps customers looking at their system.

Savings estimate takes roof area, power use, direction and battery, modules pop onto the roof and the savings glide to the new value, clearly marked as an estimate. From consultation to commissioning shows six steps with what the installer does and what the customer does. Funding and financing compares the monthly rate with the savings over the chosen term and lists the funding programs. System packages offers three packages with a battery switch and prices that follow. Live yield draws the energy flow between solar, house, battery and grid and the yield per day, month and year.

Mark every estimate as an estimate and offer the site visit right below it, that is the natural next step. Show the customer's part of the process openly, it is usually small, and that reassures. Live yield works well in references and customer portals.

Solar energy

Savings estimateNew in 1.2

Roof area, power use, direction and battery. Modules pop onto the drawn roof, the sun rises while scrolling and moves with the direction, the savings glide to the new value. Clearly marked as an estimate.

From consultation to commissioningNew in 1.2

Six steps with what we do and what you do. A line fills while scrolling, every step rises in and lifts a little under the pointer. On the side the total time, your effort and what every offer includes.

Funding and financingNew in 1.2

Buy, finance or rent. The monthly rate and the savings grow as bars and glide when you change the term, the difference per month follows. Funding programs below light up under the pointer.

System packagesNew in 1.2

Three packages, each with a drawn roof whose modules pop in while scrolling. Switch the battery on or off, prices glide and the battery appears next to the house. Pick a package and request it.

Live yieldNew in 1.2

The energy flow right now between solar, house, battery and grid, dashes run along the lines and the production breathes a little. Below the yield per day, month and year, the chart wipes in while scrolling.

Details

What Solar energy brings along, read from the registry and the source.

Area
Industries
Variants
5
Version
1.0.0 · since 1.2.0
File
components/ui/solar-energy.tsx
Brings along
utilskitbuttoniconsectionmotionrevealsliderswitch
npm packages
None
Languages
English and German, 77 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The SolarEnergyProps interface from components/ui/solar-energy.tsx, with the comments from the code.

  • variantoptional
    SolarEnergyVariant

    calculatorprocessfinancingpackageslive-yield

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • currencyoptional
    string
  • ratesoptional
    SolarRates

    calculator

  • orientationsoptional
    SolarOrientation[]
  • defaultsoptional
    { area?: number; use?: number; orientation?: string; storage?: boolean }
  • actionoptional
    { label: string; href: string }

    calculator, packages: the main action

  • stepsoptional
    SolarStep[]

    process

  • includedoptional
    string[]
  • totalTimeoptional
    string
  • effortoptional
    string
  • priceoptional
    number

    financing

  • savingsMonthlyoptional
    number
  • loanoptional
    { interest: number; terms: number[] }
  • rentoptional
    { monthly: number; years: number; includes?: string[] }
  • programsoptional
    SolarProgram[]
  • noteoptional
    string
  • packagesoptional
    SolarPackage[]

    packages

  • requestHrefoptional
    string

    packages: where a picked package goes, {id} is replaced

  • liveoptional
    SolarLive

    live-yield

  • dayoptional
    number[]

    kW per hour of the day, 24 values

  • monthoptional
    number[]

    kWh per day of the month

  • yearoptional
    number[]

    kWh per month of the year, 12 values

  • totalsoptional
    { today: number; month: number; year: number; selfUse: number }
  • asOfoptional
    string

    "HH:MM"

Built-in texts

Solar energy writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 77 texts
estimateBadgeEnglish EstimateGerman Schätzung
assumptionsEnglish We calculate withGerman Wir rechnen mit
perKwpEnglish Yield per kWpGerman Ertrag je kWp
gridPriceEnglish Grid power per kWhGerman Netzstrom je kWh
feedInRateEnglish Feed-in per kWhGerman Einspeisung je kWh
roofEnglish Usable roof areaGerman Nutzbare Dachfläche
useEnglish Power use per yearGerman Stromverbrauch im Jahr
facingEnglish Roof facesGerman Dach zeigt nach
southEnglish SouthGerman Süden
southEastWestEnglish South east or westGerman Südost oder Südwest
eastWestEnglish East and westGerman Ost und West
northEnglish NorthGerman Norden
storageEnglish With batteryGerman Mit Stromspeicher
storageHintEnglish Keeps the midday sun for the eveningGerman Hebt die Mittagssonne für den Abend auf
savingsEnglish Savings per year, aboutGerman Ersparnis pro Jahr, etwa
sizeEnglish SystemGerman Anlage
modulesEnglish ModulesGerman Module
yieldEnglish Yield per yearGerman Ertrag im Jahr
autarkyEnglish Self sufficiencyGerman Autarkie
paybackEnglish Pays back afterGerman Amortisiert nach
yearsEnglish {n} yearsGerman {n} Jahren
co2English CO₂ saved per yearGerman CO₂ gespart im Jahr
tonnesEnglish {n} tGerman {n} t
kwpEnglish {n} kWpGerman {n} kWp
kwhEnglish {n} kWhGerman {n} kWh
noteEnglish An estimate from typical values for your region. Shade, roof pitch and your daily rhythm change the result. We calculate the exact figure after a visit.German Eine Schätzung aus üblichen Werten für deine Region. Verschattung, Dachneigung und dein Tagesablauf verändern das Ergebnis. Den genauen Wert rechnen wir nach einem Termin vor Ort.
ourPartEnglish WeGerman Wir
yourPartEnglish YouGerman Du
includedEnglish Included in every offerGerman In jedem Angebot enthalten
totalTimeEnglish From the first call to the first kilowatt hourGerman Vom ersten Anruf bis zur ersten Kilowattstunde
effortEnglish Your effortGerman Dein Aufwand
wayEnglish How to payGerman So bezahlst du
buyEnglish BuyGerman Kaufen
loanEnglish FinanceGerman Finanzieren
rentEnglish RentGerman Mieten
buyTextEnglish One payment, the yield is yours from day one.German Einmal zahlen, der Ertrag gehört dir ab dem ersten Tag.
loanTextEnglish A monthly rate, the savings pay a large part of it.German Eine Monatsrate, die Ersparnis trägt einen großen Teil davon.
rentTextEnglish A fixed monthly fee with service, and you start right away.German Eine feste Monatsmiete mit Service, und du startest sofort.
onceEnglish One paymentGerman Einmalig
termEnglish TermGerman Laufzeit
termNEnglish {n} yearsGerman {n} Jahre
rateEnglish Monthly rateGerman Monatsrate
feeEnglish Monthly feeGerman Monatsmiete
savingEnglish Monthly savingsGerman Ersparnis im Monat
differenceEnglish Left over per monthGerman Bleibt im Monat übrig
ownShareEnglish Your own share per monthGerman Dein Eigenanteil im Monat
interestEnglish At {n} interest a yearGerman Bei {n} Zinsen im Jahr
paidBackEnglish Paid back after about {n} years, then every kilowatt hour is profit.German Nach etwa {n} Jahren bezahlt, danach ist jede Kilowattstunde Gewinn.
loanEndEnglish After {n} years the system is paid off and all savings stay with you.German Nach {n} Jahren ist die Anlage abbezahlt, die ganze Ersparnis bleibt bei dir.
rentIncludesEnglish Included for {n} yearsGerman Für {n} Jahre enthalten
programsEnglish Funding you can combineGerman Förderung, die du kombinieren kannst
perMonthEnglish {v} a monthGerman {v} im Monat
packageEnglish PackageGerman Paket
withStorageEnglish With batteryGerman Mit Stromspeicher
storageKwhEnglish {n} kWh batteryGerman {n} kWh Speicher
pickEnglish Request package {name}German Paket {name} anfragen
pickedEnglish SelectedGerman Gewählt
recommendedEnglish Most chosenGerman Beliebteste Wahl
fromEnglish Complete priceGerman Komplettpreis
rangeEnglish PeriodGerman Zeitraum
dayEnglish DayGerman Tag
monthEnglish MonthGerman Monat
yearEnglish YearGerman Jahr
nowEnglish Right nowGerman Gerade jetzt
asOfEnglish As of {time}German Stand {time}
pvEnglish SolarGerman Solar
houseEnglish HouseGerman Haus
batteryEnglish BatteryGerman Speicher
gridEnglish GridGerman Netz
feedingEnglish feeding inGerman Einspeisung
drawingEnglish drawingGerman Bezug
todayEnglish TodayGerman Heute
thisMonthEnglish This monthGerman Diesen Monat
thisYearEnglish This yearGerman Dieses Jahr
selfUseEnglish Used yourselfGerman Selbst genutzt
kwEnglish {n} kWGerman {n} kW
peakEnglish Peak {v}German Spitze {v}

Accessibility

Read from the source of the component.

  • Solar energy handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
  • Sets aria-checked, aria-label and aria-live, so screen readers announce purpose and state.
  • Uses the roles radio and radiogroup.
  • Announces changes through a live region without moving focus.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 5 places in the code switch motion off then.

Frequent questions

How do I install Solar energy?

With aiw add @ai-website/solar-energy. The command puts components/ui/solar-energy.tsx into your project, the code is yours from then on. It brings along button, icon, section, motion, reveal, slider and switch. It needs no further npm packages.

Which variants does Solar energy have?

5 variants, Savings estimate, From consultation to commissioning, Funding and financing, System packages and Live yield. You pick one with the variant prop, for example variant="process".

Can I translate the texts of Solar energy?

Yes. Solar energy carries 77 texts of its own in English and German, such as “Estimate”, “We calculate with” and “Yield per kWp”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Solar energy?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Solar energy with aiw_components and install it with aiw_add @ai-website/solar-energy. Name the variant in your prompt, for example variant="calculator", and the assistant writes your content straight into the props.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Solar energy on a page.

Often searched

Jump to

Copied to the clipboard