Zum Inhalt springen
UI Kit
Accent

Autohaus

Für Autohäuser, Werkstätten und Vermietungen. Bestand mit Filtern, die Fahrzeugseite, Probefahrt mit Route, Finanzierung und Ankauf.

5 Variants
Kategorie wechseln

Autohaus

Fahrzeugbestand

Karosserie, Antrieb und ein Preisregler an der Seite, Sortierung oben. Das Raster sortiert sich gestaffelt neu, auf dem Telefon klappen die Filter mit Zähler auf.

Im Studio öffnen

Fahrzeugseite

Eine Galerie, die in Blätterrichtung gleitet, Vorschaubilder, Eckdaten, die aufsteigen, Ausstattung in Gruppen und eine klebende Preiskarte mit Probefahrt und Telefon.

Im Studio öffnen

Probefahrt

Fahrzeug, Tag und Uhrzeit wählen, Kontakt angeben und Führerschein bestätigen. Auf der Karte zeichnet sich die Route, ein Punkt fährt sie beim Hereinscrollen ab.

Im Studio öffnen

Finanzierung

Preis und Anzahlung auf Reglern, Laufzeit und Schlussrate auf gleitenden Schaltern. Die Rate gleitet mit, ein Balken teilt Kredit und Zinsen, das repräsentative Beispiel rechnet mit.

Im Studio öffnen

Ankauf

Marke, Baujahr, Kilometerstand und Zustand ergeben eine Wertspanne, die mitgleitet, gezeichnet als Band zwischen zwei Punkten.

Im Studio öffnen

Details

Was Autohaus mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/automotive.tsx
Bringt mit
utilskitbuttoniconrevealsectionmotioninputslider
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 64 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • 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

Eingebaute Texte

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

Alle 64 Texte anzeigen
bodyEnglisch BodyDeutsch Karosserie
fuelEnglisch FuelDeutsch Antrieb
allEnglisch AllDeutsch Alle
maxPriceEnglisch Up toDeutsch Bis
sortEnglisch Sort byDeutsch Sortieren
sortPriceEnglisch Lowest priceDeutsch Niedrigster Preis
sortKmEnglisch Lowest mileageDeutsch Wenigste Kilometer
sortYearEnglisch NewestDeutsch Neueste zuerst
resultsEnglisch {n} vehiclesDeutsch {n} Fahrzeuge
oneResultEnglisch 1 vehicleDeutsch 1 Fahrzeug
noneEnglisch No vehicle matches these filters.Deutsch Kein Fahrzeug passt zu diesen Filtern.
resetEnglisch Reset filtersDeutsch Filter zurücksetzen
filtersEnglisch FiltersDeutsch Filter
showNEnglisch Show {n} vehiclesDeutsch {n} Fahrzeuge zeigen
kmEnglisch {n} kmDeutsch {n} km
kwEnglisch {kw} kW ({ps} hp)Deutsch {kw} kW ({ps} PS)
fromEnglisch from {price} a monthDeutsch ab {price} im Monat
detailsEnglisch View detailsDeutsch Details ansehen
galleryEnglisch PicturesDeutsch Bilder
picEnglisch Picture {n} of {total}Deutsch Bild {n} von {total}
specsEnglisch Key factsDeutsch Eckdaten
equipmentEnglisch EquipmentDeutsch Ausstattung
testDriveEnglisch Book a test driveDeutsch Probefahrt buchen
financeFromEnglisch Finance from {price} a monthDeutsch Finanzieren ab {price} im Monat
vehicleEnglisch VehicleDeutsch Fahrzeug
dayEnglisch DayDeutsch Tag
timeEnglisch TimeDeutsch Uhrzeit
nameEnglisch NameDeutsch Name
phoneEnglisch PhoneDeutsch Telefon
emailEnglisch EmailDeutsch E-Mail
licenceEnglisch I hold a valid driving licence and will bring it.Deutsch Ich habe einen gültigen Führerschein und bringe ihn mit.
requiredEnglisch Please fill in this field.Deutsch Bitte füllen Sie dieses Feld aus.
licenceReqEnglisch Please confirm your licence.Deutsch Bitte bestätigen Sie den Führerschein.
invalidEmailEnglisch Please enter a valid email address.Deutsch Bitte geben Sie eine gültige E-Mail-Adresse ein.
bookEnglisch Request test driveDeutsch Probefahrt anfragen
bookedEnglisch See you on {day} at {time}Deutsch Bis {day} um {time} Uhr
bookedTextEnglisch 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.Deutsch Das Auto steht gewaschen, geladen oder getankt vor der Tür. Planen Sie etwa 45 Minuten ein, halb Stadt, halb Autobahn.
againEnglisch Book another test driveDeutsch Weitere Probefahrt buchen
routeEnglisch Your routeDeutsch Ihre Route
routeTextEnglisch {min} minutes, about {km} km, town and motorwayDeutsch {min} Minuten, etwa {km} km, Stadt und Autobahn
priceEnglisch Vehicle priceDeutsch Fahrzeugpreis
downEnglisch Down paymentDeutsch Anzahlung
termEnglisch TermDeutsch Laufzeit
monthsEnglisch {n} monthsDeutsch {n} Monate
balloonEnglisch Final paymentDeutsch Schlussrate
balloonOnEnglisch With final paymentDeutsch Mit Schlussrate
balloonOffEnglisch WithoutDeutsch Ohne
monthlyEnglisch Monthly rateDeutsch Monatliche Rate
rateEnglisch Annual percentage rate {rate}Deutsch Effektiver Jahreszins {rate}
totalCostEnglisch Total amount payableDeutsch Gesamtbetrag
interestEnglisch InterestDeutsch Zinsen
principalEnglisch LoanDeutsch Kredit
applyEnglisch Apply for financingDeutsch Finanzierung anfragen
exampleEnglisch Representative exampleDeutsch Repräsentatives Beispiel
makeEnglisch Make and modelDeutsch Marke und Modell
yearEnglisch YearDeutsch Baujahr
mileageEnglisch MileageDeutsch Kilometerstand
conditionEnglisch ConditionDeutsch Zustand
estimateEnglisch Estimated trade-in valueDeutsch Geschätzter Ankaufswert
estimateNoteEnglisch A first estimate from recent sales. After a short look at the car we make a binding offer, valid for 14 days.Deutsch Eine erste Schätzung aus aktuellen Verkäufen. Nach einem kurzen Blick aufs Auto machen wir ein verbindliches Angebot, 14 Tage gültig.
getOfferEnglisch Get a binding offerDeutsch Verbindliches Angebot holen
goodEnglisch Very goodDeutsch Sehr gut
okEnglisch GoodDeutsch Gut
wornEnglisch UsedDeutsch Gebraucht

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Autohaus reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-controls, aria-expanded, aria-invalid, aria-label, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group, img, radio, radiogroup, status, tab und tablist.
  • 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. 8 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Autohaus?

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

Welche Varianten hat Autohaus?

5 Varianten, Fahrzeugbestand, Fahrzeugseite, Probefahrt, Finanzierung und Ankauf. Du wählst sie mit der Prop variant, zum Beispiel variant="vehicle-detail".

Kann ich die Texte von Autohaus übersetzen?

Ja. Autohaus bringt 64 eigene Texte auf Deutsch und Englisch mit, etwa „Karosserie“, „Antrieb“ und „Alle“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Autohaus einbauen?

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

Kann ich Autohaus ohne Code anpassen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Autohaus stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert