Handwerk

Für Installateure, Elektriker, Dachdecker, Fliesenleger und Maler. Leistungen nach Bereich im Haus, vorher und nachher, Angebotsanfrage mit Schätzung, Notdienst und Materialien.

5 Variants

Kategorie wechseln

Leistungen nach Bereich

Ein Haus im Schnitt mit Pins, die hereinspringen. Pin überfahren oder antippen, die Leistungen für den Bereich gleiten herein, mit Preis ab und Dauer.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/trades

Bringt mit utils, kit, button, icon, reveal, section, motion, input, slider, image-compare

Usage

<Trades variant="services" house={<img … />} areas={[{ id, title, icon, x, y, services: [{ title, text, from, duration }] }]} />

Source

Vorher und nachher

Projekte als Reiter, jedes mit einem Vergleichsregler, der beim Hereinscrollen einmal ausschwingt, daneben die Eckdaten des Auftrags.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/trades

Bringt mit utils, kit, button, icon, reveal, section, motion, input, slider, image-compare

Usage

<Trades variant="before-after" projects={[{ id, title, trade, place, duration, budget, text, before, after }]} />

Source

Angebot anfragen

Auftrag wählen, Größe per Regler und Zeitraum per gleitendem Schalter einstellen, Fotos anhängen. Daneben gleitet die geschätzte Spanne mit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/trades

Bringt mit utils, kit, button, icon, reveal, section, motion, input, slider, image-compare

Usage

<Trades variant="quote-request" options={[{ id, label, icon, rate: [80, 140] }]} onSubmit={(d) => …} />

Source

Notdienst

Ein dunkles Band mit der Nummer in großer Schrift, Live-Punkt und Anfahrtszeit. Daneben eine Postleitzahl-Prüfung, die sofort antwortet, und die Preise.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/trades

Bringt mit utils, kit, button, icon, reveal, section, motion, input, slider, image-compare

Usage

<Trades variant="emergency" phone="0761 555 0 112" responseMinutes={45} emergencies={[{ label, icon }]} coverage={["790", "791"]} fees={[{ label, price }]} />

Source

Materialien

Verlegemuster und Material wählen, die Bodenprobe zeichnet sich weich neu. Die Raumgröße bestimmt den Gesamtpreis, Fischgrät kostet etwas mehr.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/trades

Bringt mit utils, kit, button, icon, reveal, section, motion, input, slider, image-compare

Usage

<Trades variant="materials" materials={[{ id, name, price, colors: ["#c8a27a", "#b48a62"] }]} />

Source

Details

Was Handwerk mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 5
Version: 1.0.0 · seit 1.1.0
Datei: components/ui/trades.tsx
Bringt mit: utilskitbutton iconrevealsectionmotioninput slider image-compare
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 50 eigene Texte
Studio: Alle 5 Variants bearbeitbar
In Sammlungen: Lokales Geschäft
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle TradesProps aus components/ui/trades.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
TradesVariant
servicesbefore-afterquote-requestemergencymaterials
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
houseoptional
React.ReactNode
services: the house picture the pins sit on, and its areas
areasoptional
TradeArea[]
projectsoptional
TradeProject[]
optionsoptional
TradeOption[]
quote-request
phoneoptional
string
emergency
responseMinutesoptional
number
emergenciesoptional
{ label: string; icon?: IconName }[]
coverageoptional
string[]
emergency: postcode prefixes that are covered
feesoptional
{ label: string; price: number }[]
materialsoptional
TradeMaterial[]
materials
currencyoptional
string
onSubmitoptional
(data: Record<string, string>) => void

Eingebaute Texte

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

Alle 50 Texte anzeigen

Schlüssel	Englisch	Deutsch
areas	Englisch Areas of the house	Deutsch Bereiche im Haus
from	Englisch from {price}	Deutsch ab {price}
duration	Englisch Duration	Deutsch Dauer
ask	Englisch Ask about {area}	Deutsch Zu {area} anfragen
projects	Englisch Projects	Deutsch Projekte
budget	Englisch Budget	Deutsch Budget
place	Englisch Place	Deutsch Ort
trade	Englisch Trade	Deutsch Gewerk
before	Englisch Before	Deutsch Vorher
after	Englisch After	Deutsch Nachher
what	Englisch What needs doing?	Deutsch Was soll gemacht werden?
size	Englisch Size	Deutsch Größe
sqm	Englisch {n} m²	Deutsch {n} m²
when	Englisch When should we start?	Deutsch Wann soll es losgehen?
asap	Englisch As soon as possible	Deutsch So bald wie möglich
months	Englisch In 1 to 3 months	Deutsch In 1 bis 3 Monaten
later	Englisch Later this year	Deutsch Später im Jahr
photos	Englisch Photos of the room	Deutsch Fotos vom Raum
photosHint	Englisch Optional, but it helps us quote more precisely.	Deutsch Freiwillig, aber so können wir genauer kalkulieren.
name	Englisch Name	Deutsch Name
phone	Englisch Phone	Deutsch Telefon
email	Englisch Email	Deutsch E-Mail
required	Englisch Please fill in this field.	Deutsch Bitte füllen Sie dieses Feld aus.
invalidEmail	Englisch Please enter a valid email address.	Deutsch Bitte geben Sie eine gültige E-Mail-Adresse ein.
estimate	Englisch Rough estimate	Deutsch Grobe Schätzung
estimateNote	Englisch Labour and material for an average job. The binding quote follows after a visit, free of charge.	Deutsch Arbeit und Material für einen durchschnittlichen Auftrag. Das verbindliche Angebot folgt nach einem kostenlosen Termin vor Ort.
send	Englisch Request a quote	Deutsch Angebot anfragen
sent	Englisch Your request is with us	Deutsch Ihre Anfrage ist bei uns
sentText	Englisch We will call you within one working day to arrange a visit.	Deutsch Wir rufen Sie innerhalb eines Werktags an und vereinbaren einen Termin vor Ort.
again	Englisch Send another request	Deutsch Weitere Anfrage senden
to	Englisch to	Deutsch bis
available	Englisch Technician available now	Deutsch Techniker jetzt verfügbar
response	Englisch On site in about {n} minutes	Deutsch In etwa {n} Minuten vor Ort
call	Englisch Call now	Deutsch Jetzt anrufen
emergencies	Englisch We come at once for	Deutsch Wir kommen sofort bei
check	Englisch Check your area	Deutsch Einsatzgebiet prüfen
postcode	Englisch Postcode	Deutsch Postleitzahl
checkBtn	Englisch Check	Deutsch Prüfen
inArea	Englisch We cover {code}. Call now and we are on our way.	Deutsch {code} liegt in unserem Gebiet. Rufen Sie jetzt an, wir machen uns auf den Weg.
outArea	Englisch {code} is outside our emergency area. A partner nearby can help, we will put you in touch.	Deutsch {code} liegt außerhalb unseres Notdienstgebiets. Ein Partner in der Nähe hilft, wir stellen den Kontakt her.
fees	Englisch Emergency fees	Deutsch Notdienstpreise
pattern	Englisch Pattern	Deutsch Verlegemuster
material	Englisch Material	Deutsch Material
room	Englisch Room size	Deutsch Raumgröße
total	Englisch Including laying	Deutsch Inklusive Verlegung
perSqm	Englisch {price} per m²	Deutsch {price} pro m²
sample	Englisch Order a free sample	Deutsch Kostenloses Muster bestellen
grid	Englisch Grid	Deutsch Raster
plank	Englisch Planks	Deutsch Dielen
herringbone	Englisch Herringbone	Deutsch Fischgrät

Aus dem Quellcode der Component abgeleitet.

Handwerk reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
Setzt aria-checked, aria-controls, aria-label, aria-live und aria-selected, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen radio, radiogroup, status, tab, tablist und tabpanel.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
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).
Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 2 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Handwerk?

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

Welche Varianten hat Handwerk?

5 Varianten, Leistungen nach Bereich, Vorher und nachher, Angebot anfragen, Notdienst und Materialien. Du wählst sie mit der Prop variant, zum Beispiel variant="before-after".

Kann ich die Texte von Handwerk übersetzen?

Ja. Handwerk bringt 50 eigene Texte auf Deutsch und Englisch mit, etwa „Bereiche im Haus“, „Dauer“ und „Projekte“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Handwerk einbauen?

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

Kann ich Handwerk ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Trades-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Handwerk stehen.

Handwerk

Leistungen nach Bereich

Vorher und nachher

Angebot anfragen

Notdienst

Materialien

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Teil dieser Sammlungen

Teil dieser Sammlungen

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit