Automotive

For car dealers, garages and rentals. Inventory with filters, the vehicle page, a test drive with route, financing and a trade-in estimate.

5 variants

Switch category

Inventory

Body, fuel and a price slider at the side, sort above. The grid re-sorts with a stagger, on phones the filters fold out with a count.

Open in Studio

Installv1.0.0

aiw add @ai-website/automotive

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

Usage

<Automotive variant="inventory" vehicles={[{ id, name, trim, body, fuel, price, year, km, kw, image, badge, href }]} />

Source

Vehicle page

A gallery that slides in the direction you go, thumbnails, key facts that rise in, equipment in groups and a sticky price card with test drive and phone.

Open in Studio

Installv1.0.0

aiw add @ai-website/automotive

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

Usage

<Automotive variant="vehicle-detail" detail={{ vehicle: { name, trim, price, gallery: [<img />…] }, specs: [{ label, value, icon }], equipment: [{ title, items }], monthly, phone, warranty }} />

Source

Test drive

Pick a car, a day and a time, leave contact and confirm the licence. On the map the route draws itself and a dot drives it when it scrolls in.

Open in Studio

Installv1.0.0

aiw add @ai-website/automotive

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

Usage

<Automotive variant="test-drive" vehicles={[…]} days={["2026-10-27"]} times={["09:00"]} map={<img … />} route="M40 360 C…" onSubmit={(d) => …} />

Source

Financing

Price and down payment on sliders, term and final payment on gliding switches. The rate glides, a bar splits loan and interest, the representative example updates.

Open in Studio

Installv1.0.0

aiw add @ai-website/automotive

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

Usage

<Automotive variant="financing" price={31200} interest={5.99} balloonShare={0.3} />

Source

Trade-in value

Make, year, mileage and condition give a value range that glides along, drawn as a band between two handles.

Open in Studio

Installv1.0.0

aiw add @ai-website/automotive

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

Usage

<Automotive variant="trade-in" currentYear={2026} makes={[{ id, label, base }]} />

Source

Details

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

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

Props

The AutomotiveProps interface from components/ui/automotive.tsx, with the comments from the code.

variantoptional
AutomotiveVariant
inventoryvehicle-detailtest-drivefinancingtrade-in
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
vehiclesoptional
Vehicle[]
inventory, test-drive: the cars
detailoptional
VehicleDetail
vehicle-detail
daysoptional
string[]
test-drive: bookable days (YYYY-MM-DD) and times (HH:MM)
timesoptional
string[]
mapoptional
React.ReactNode
test-drive: a map picture and an SVG path on a 600 by 400 grid that draws itself on it
routeoptional
string
routeMinutesoptional
number
routeKmoptional
number
priceoptional
number
financing: the price to start from and the yearly interest in percent
interestoptional
number
balloonShareoptional
number
financing: final payment as share of the price, 0 to 1
makesoptional
{ id: string; label: string; base: number }[]
trade-in: makes to choose from, and a base value table by make
currentYearoptional
number
trade-in: the year the estimate is made in, sets the year slider and the end of the curve (fixed, so the render stays the same on server and client)
currencyoptional
string
onSubmitoptional
(data: Record<string, string>) => void

Built-in texts

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

Show all 64 texts

Key	English	German
body	English Body	German Karosserie
fuel	English Fuel	German Antrieb
all	English All	German Alle
maxPrice	English Up to	German Bis
sort	English Sort by	German Sortieren
sortPrice	English Lowest price	German Niedrigster Preis
sortKm	English Lowest mileage	German Wenigste Kilometer
sortYear	English Newest	German Neueste zuerst
results	English {n} vehicles	German {n} Fahrzeuge
oneResult	English 1 vehicle	German 1 Fahrzeug
none	English No vehicle matches these filters.	German Kein Fahrzeug passt zu diesen Filtern.
reset	English Reset filters	German Filter zurücksetzen
filters	English Filters	German Filter
showN	English Show {n} vehicles	German {n} Fahrzeuge zeigen
km	English {n} km	German {n} km
kw	English {kw} kW ({ps} hp)	German {kw} kW ({ps} PS)
from	English from {price} a month	German ab {price} im Monat
details	English View details	German Details ansehen
gallery	English Pictures	German Bilder
pic	English Picture {n} of {total}	German Bild {n} von {total}
specs	English Key facts	German Eckdaten
equipment	English Equipment	German Ausstattung
testDrive	English Book a test drive	German Probefahrt buchen
financeFrom	English Finance from {price} a month	German Finanzieren ab {price} im Monat
vehicle	English Vehicle	German Fahrzeug
day	English Day	German Tag
time	English Time	German Uhrzeit
name	English Name	German Name
phone	English Phone	German Telefon
email	English Email	German E-Mail
licence	English I hold a valid driving licence and will bring it.	German Ich habe einen gültigen Führerschein und bringe ihn mit.
required	English Please fill in this field.	German Bitte füllen Sie dieses Feld aus.
licenceReq	English Please confirm your licence.	German Bitte bestätigen Sie den Führerschein.
invalidEmail	English Please enter a valid email address.	German Bitte geben Sie eine gültige E-Mail-Adresse ein.
book	English Request test drive	German Probefahrt anfragen
booked	English See you on {day} at {time}	German Bis {day} um {time} Uhr
bookedText	English The car will be cleaned, charged or fuelled and parked at the door. Plan about 45 minutes, half in town and half on the motorway.	German Das Auto steht gewaschen, geladen oder getankt vor der Tür. Planen Sie etwa 45 Minuten ein, halb Stadt, halb Autobahn.
again	English Book another test drive	German Weitere Probefahrt buchen
route	English Your route	German Ihre Route
routeText	English {min} minutes, about {km} km, town and motorway	German {min} Minuten, etwa {km} km, Stadt und Autobahn
price	English Vehicle price	German Fahrzeugpreis
down	English Down payment	German Anzahlung
term	English Term	German Laufzeit
months	English {n} months	German {n} Monate
balloon	English Final payment	German Schlussrate
balloonOn	English With final payment	German Mit Schlussrate
balloonOff	English Without	German Ohne
monthly	English Monthly rate	German Monatliche Rate
rate	English Annual percentage rate {rate}	German Effektiver Jahreszins {rate}
totalCost	English Total amount payable	German Gesamtbetrag
interest	English Interest	German Zinsen
principal	English Loan	German Kredit
apply	English Apply for financing	German Finanzierung anfragen
example	English Representative example	German Repräsentatives Beispiel
make	English Make and model	German Marke und Modell
year	English Year	German Baujahr
mileage	English Mileage	German Kilometerstand
condition	English Condition	German Zustand
estimate	English Estimated trade-in value	German Geschätzter Ankaufswert
estimateNote	English A first estimate from recent sales. After a short look at the car we make a binding offer, valid for 14 days.	German Eine erste Schätzung aus aktuellen Verkäufen. Nach einem kurzen Blick aufs Auto machen wir ein verbindliches Angebot, 14 Tage gültig.
getOffer	English Get a binding offer	German Verbindliches Angebot holen
good	English Very good	German Sehr gut
ok	English Good	German Gut
worn	English Used	German Gebraucht

Read from the source of the component.

Automotive handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-controls, aria-expanded, aria-invalid, aria-label, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
Uses the roles group, img, radio, radiogroup, status, tab and tablist.
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. 8 places in the code switch motion off then.

Frequent questions

How do I install Automotive?

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

Which variants does Automotive have?

5 variants, Inventory, Vehicle page, Test drive, Financing and Trade-in value. You pick one with the variant prop, for example variant="vehicle-detail".

Can I translate the texts of Automotive?

Yes. Automotive carries 64 texts of its own in English and German, such as “Body”, “Fuel” and “All”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Automotive?

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

Can I adjust Automotive without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Automotive on a page.

Automotive

Inventory

Vehicle page

Test drive

Financing

Trade-in value

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with