Trades

For plumbers, electricians, roofers, tilers and painters. Services by area of the house, before and after, a quote request with estimate, an emergency service and materials.

5 variants

Switch category

Services by area

A house in section with pins that pop in. Hover or tap a pin and the services for that area slide in, with prices from and duration.

Open in Studio

Installv1.0.0

aiw add @ai-website/trades

Brings along 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

Before and after

Projects as tabs, each with a comparison slider that swings once when it scrolls in, and the facts of the job beside it.

Open in Studio

Installv1.0.0

aiw add @ai-website/trades

Brings along 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

Quote request

Pick the job, set the size on a slider and the timing on a gliding switch, add photos. The estimate range glides along beside it.

Open in Studio

Installv1.0.0

aiw add @ai-website/trades

Brings along 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

Emergency service

A dark band with the number in large type, a live dot and the response time. Next to it a postcode check that answers at once, and the fees.

Open in Studio

Installv1.0.0

aiw add @ai-website/trades

Brings along 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

Materials

Pick a laying pattern and a material, the floor sample redraws with a soft blend. The room size sets the total, herringbone costs a little more.

Open in Studio

Installv1.0.0

aiw add @ai-website/trades

Brings along utils, kit, button, icon, reveal, section, motion, input, slider, image-compare

Usage

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

Source

Details

What Trades brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/trades.tsx
Brings along: utilskitbutton iconrevealsectionmotioninput slider image-compare
npm packages: None
Languages: English and German, 50 texts of its own
Studio: All 5 variants editable
In collections: Local business
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The TradesProps interface from components/ui/trades.tsx, with the comments from the code.

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

Built-in texts

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

Show all 50 texts

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

Read from the source of the component.

Trades handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-controls, aria-label, aria-live and aria-selected, so screen readers announce purpose and state.
Uses the roles radio, radiogroup, status, tab, tablist and tabpanel.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
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).
Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 2 places in the code switch motion off then.

Frequent questions

How do I install Trades?

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

Which variants does Trades have?

5 variants, Services by area, Before and after, Quote request, Emergency service and Materials. You pick one with the variant prop, for example variant="before-after".

Can I translate the texts of Trades?

Yes. Trades carries 50 texts of its own in English and German, such as “Areas of the house”, “Duration” and “Projects”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Trades?

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

Can I adjust Trades without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching Trades code to copy.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Trades on a page.

Trades

Services by area

Before and after

Quote request

Emergency service

Materials

Details

Props

Built-in texts

Accessibility

Motion

Part of these collections

Part of these collections

Frequent questions

Similar components, Often combined with

Similar components

Often combined with