Zum Inhalt springen
UI Kit
Accent

Solarbetrieb Website Sections

Für Solarteure und Energiebetriebe. Eine Ersparnis-Schätzung mit gezeichnetem Dach, der Weg bis zur Inbetriebnahme, Kauf, Finanzierung und Förderung, Anlagenpakete und der Live-Ertrag.

5 Variants
Kategorie wechseln

Vom Dach bis zur ersten Kilowattstunde

Hausbesitzer fragen einen Solarbetrieb zwei Dinge, was es spart und wie viel Aufwand es macht. Diese Sections antworten mit einer Schätzung am gezeichneten Dach, den Schritten von der Beratung bis zur Inbetriebnahme und der Wahl zwischen Kauf, Finanzierung und Miete. Nach der Montage hält der Live-Ertrag den Kunden bei seiner Anlage.

Der „Ersparnisrechner“ nimmt Dachfläche, Stromverbrauch, Ausrichtung und Speicher auf, Module erscheinen auf dem Dach und die Ersparnis gleitet zum neuen Wert, klar als Schätzung gekennzeichnet. „Von der Beratung bis zur Inbetriebnahme“ zeigt sechs Schritte mit dem Teil des Betriebs und dem Teil des Kunden. „Förderung und Finanzierung“ stellt Monatsrate und Ersparnis über die gewählte Laufzeit gegenüber und listet die Förderprogramme. „Anlagenpakete“ bietet drei Pakete mit Speicher-Schalter und mitlaufenden Preisen. Der „Live-Ertrag“ zeichnet den Energiefluss zwischen Solar, Haus, Speicher und Netz und den Ertrag je Tag, Monat und Jahr.

Kennzeichne jede Schätzung als Schätzung und biete direkt darunter den Vor-Ort-Termin an, das ist der natürliche nächste Schritt. Zeig den Teil des Kunden im Ablauf offen, er ist meist klein, und das beruhigt. Der Live-Ertrag macht sich gut in Referenzen und Kundenportalen.

Solarbetrieb

ErsparnisrechnerNeu in 1.2

Dachfläche, Verbrauch, Ausrichtung und Speicher. Module springen auf das gezeichnete Dach, die Sonne geht beim Scrollen auf und wandert mit der Ausrichtung, die Ersparnis gleitet zum neuen Wert. Klar als Schätzung gekennzeichnet.

Von der Beratung bis zur InbetriebnahmeNeu in 1.2

Sechs Schritte mit dem, was wir tun und was du tust. Eine Linie füllt sich beim Scrollen, jeder Schritt steigt herein und hebt sich unter dem Zeiger leicht an. Daneben die Gesamtdauer, dein Aufwand und was jedes Angebot enthält.

Förderung und FinanzierungNeu in 1.2

Kaufen, finanzieren oder mieten. Monatsrate und Ersparnis wachsen als Balken und gleiten mit, wenn sich die Laufzeit ändert, die Differenz im Monat folgt. Förderprogramme darunter leuchten unter dem Zeiger auf.

AnlagenpaketeNeu in 1.2

Drei Pakete, jedes mit gezeichnetem Dach, dessen Module beim Scrollen hineinspringen. Den Speicher ein- oder ausschalten, die Preise gleiten und der Speicher erscheint neben dem Haus. Ein Paket wählen und anfragen.

Live-ErtragNeu in 1.2

Der Energiefluss gerade jetzt zwischen Solar, Haus, Speicher und Netz, Striche laufen über die Linien und die Erzeugung atmet leicht. Daneben der Ertrag je Tag, Monat und Jahr, das Diagramm wischt beim Scrollen herein.

Details

Was Solarbetrieb mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.0 · seit 1.2.0
Datei
components/ui/solar-energy.tsx
Bringt mit
utilskitbuttoniconsectionmotionrevealsliderswitch
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 77 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle SolarEnergyProps aus components/ui/solar-energy.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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"

Eingebaute Texte

Diese Texte schreibt Solarbetrieb selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 77 Texte anzeigen
estimateBadgeEnglisch EstimateDeutsch Schätzung
assumptionsEnglisch We calculate withDeutsch Wir rechnen mit
perKwpEnglisch Yield per kWpDeutsch Ertrag je kWp
gridPriceEnglisch Grid power per kWhDeutsch Netzstrom je kWh
feedInRateEnglisch Feed-in per kWhDeutsch Einspeisung je kWh
roofEnglisch Usable roof areaDeutsch Nutzbare Dachfläche
useEnglisch Power use per yearDeutsch Stromverbrauch im Jahr
facingEnglisch Roof facesDeutsch Dach zeigt nach
southEnglisch SouthDeutsch Süden
southEastWestEnglisch South east or westDeutsch Südost oder Südwest
eastWestEnglisch East and westDeutsch Ost und West
northEnglisch NorthDeutsch Norden
storageEnglisch With batteryDeutsch Mit Stromspeicher
storageHintEnglisch Keeps the midday sun for the eveningDeutsch Hebt die Mittagssonne für den Abend auf
savingsEnglisch Savings per year, aboutDeutsch Ersparnis pro Jahr, etwa
sizeEnglisch SystemDeutsch Anlage
modulesEnglisch ModulesDeutsch Module
yieldEnglisch Yield per yearDeutsch Ertrag im Jahr
autarkyEnglisch Self sufficiencyDeutsch Autarkie
paybackEnglisch Pays back afterDeutsch Amortisiert nach
yearsEnglisch {n} yearsDeutsch {n} Jahren
co2Englisch CO₂ saved per yearDeutsch CO₂ gespart im Jahr
tonnesEnglisch {n} tDeutsch {n} t
kwpEnglisch {n} kWpDeutsch {n} kWp
kwhEnglisch {n} kWhDeutsch {n} kWh
noteEnglisch 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.Deutsch 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.
ourPartEnglisch WeDeutsch Wir
yourPartEnglisch YouDeutsch Du
includedEnglisch Included in every offerDeutsch In jedem Angebot enthalten
totalTimeEnglisch From the first call to the first kilowatt hourDeutsch Vom ersten Anruf bis zur ersten Kilowattstunde
effortEnglisch Your effortDeutsch Dein Aufwand
wayEnglisch How to payDeutsch So bezahlst du
buyEnglisch BuyDeutsch Kaufen
loanEnglisch FinanceDeutsch Finanzieren
rentEnglisch RentDeutsch Mieten
buyTextEnglisch One payment, the yield is yours from day one.Deutsch Einmal zahlen, der Ertrag gehört dir ab dem ersten Tag.
loanTextEnglisch A monthly rate, the savings pay a large part of it.Deutsch Eine Monatsrate, die Ersparnis trägt einen großen Teil davon.
rentTextEnglisch A fixed monthly fee with service, and you start right away.Deutsch Eine feste Monatsmiete mit Service, und du startest sofort.
onceEnglisch One paymentDeutsch Einmalig
termEnglisch TermDeutsch Laufzeit
termNEnglisch {n} yearsDeutsch {n} Jahre
rateEnglisch Monthly rateDeutsch Monatsrate
feeEnglisch Monthly feeDeutsch Monatsmiete
savingEnglisch Monthly savingsDeutsch Ersparnis im Monat
differenceEnglisch Left over per monthDeutsch Bleibt im Monat übrig
ownShareEnglisch Your own share per monthDeutsch Dein Eigenanteil im Monat
interestEnglisch At {n} interest a yearDeutsch Bei {n} Zinsen im Jahr
paidBackEnglisch Paid back after about {n} years, then every kilowatt hour is profit.Deutsch Nach etwa {n} Jahren bezahlt, danach ist jede Kilowattstunde Gewinn.
loanEndEnglisch After {n} years the system is paid off and all savings stay with you.Deutsch Nach {n} Jahren ist die Anlage abbezahlt, die ganze Ersparnis bleibt bei dir.
rentIncludesEnglisch Included for {n} yearsDeutsch Für {n} Jahre enthalten
programsEnglisch Funding you can combineDeutsch Förderung, die du kombinieren kannst
perMonthEnglisch {v} a monthDeutsch {v} im Monat
packageEnglisch PackageDeutsch Paket
withStorageEnglisch With batteryDeutsch Mit Stromspeicher
storageKwhEnglisch {n} kWh batteryDeutsch {n} kWh Speicher
pickEnglisch Request package {name}Deutsch Paket {name} anfragen
pickedEnglisch SelectedDeutsch Gewählt
recommendedEnglisch Most chosenDeutsch Beliebteste Wahl
fromEnglisch Complete priceDeutsch Komplettpreis
rangeEnglisch PeriodDeutsch Zeitraum
dayEnglisch DayDeutsch Tag
monthEnglisch MonthDeutsch Monat
yearEnglisch YearDeutsch Jahr
nowEnglisch Right nowDeutsch Gerade jetzt
asOfEnglisch As of {time}Deutsch Stand {time}
pvEnglisch SolarDeutsch Solar
houseEnglisch HouseDeutsch Haus
batteryEnglisch BatteryDeutsch Speicher
gridEnglisch GridDeutsch Netz
feedingEnglisch feeding inDeutsch Einspeisung
drawingEnglisch drawingDeutsch Bezug
todayEnglisch TodayDeutsch Heute
thisMonthEnglisch This monthDeutsch Diesen Monat
thisYearEnglisch This yearDeutsch Dieses Jahr
selfUseEnglisch Used yourselfDeutsch Selbst genutzt
kwEnglisch {n} kWDeutsch {n} kW
peakEnglisch Peak {v}Deutsch Spitze {v}

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Solarbetrieb reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen radio und radiogroup.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 5 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Solarbetrieb?

Mit aiw add @ai-website/solar-energy. Der Befehl legt die Datei components/ui/solar-energy.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section, motion, reveal, slider und switch. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Solarbetrieb?

5 Varianten, Ersparnisrechner, Von der Beratung bis zur Inbetriebnahme, Förderung und Finanzierung, Anlagenpakete und Live-Ertrag. Du wählst sie mit der Prop variant, zum Beispiel variant="process".

Kann ich die Texte von Solarbetrieb übersetzen?

Ja. Solarbetrieb bringt 77 eigene Texte auf Deutsch und Englisch mit, etwa „Schätzung“, „Wir rechnen mit“ und „Ertrag je kWp“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Solarbetrieb einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Solarbetrieb mit aiw_components und installieren sie mit aiw_add @ai-website/solar-energy. Nenn im Prompt die Variante, etwa variant="calculator", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Solarbetrieb stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert