Zum Inhalt springen
UI Kit
Accent

Spedition und Logistik Website Sections

Für Speditionen, Transportunternehmen und Logistiker. Sendungsverfolgung, das Netz auf einer gezeichneten Karte, die Flotte maßstabsgetreu, eine Frachtanfrage und Laufzeiten nach Postleitzahl.

5 Variants
Kategorie wechseln

Jede Palette auf ihrem Weg

Versender kommen auf die Website einer Spedition, um eine Sendung zu verfolgen, einen Preis anzufragen oder Laufzeiten zu prüfen. Diese Sections bedienen alle drei und zeigen das Netz und die Flotte hinter dem Versprechen. Karten und Fahrzeuge sind gezeichnet, die Seite kommt also mit sich selbst aus.

Die „Sendungsverfolgung“ nimmt eine Nummer auf und fährt einen Lkw durch fünf Schritte, der Verlauf folgt Eintrag für Eintrag, unbekannte Nummern bekommen einen hilfreichen Hinweis. „Netz und Standorte“ zeichnet Hubs, Depots und Partner auf eine Karte, der gewählte Standort zeigt Lager, Rampen, Leistungen und Telefon. „Flotte“ zeichnet Fahrzeugtypen maßstäblich gegen einen 13,6-Meter-Auflieger und füllt den Ladeplan mit Paletten. Die „Frachtanfrage“ fragt Strecke, Ware, Paletten, Gewicht und Extras ab, zählt die Lademeter und nennt das passende Fahrzeug. „Laufzeiten“ listet Relationen ab dem gewählten Depot mit Annahmeschluss und Abfahrtstagen und findet die Relation zu einer Postleitzahl.

Stell die Sendungsverfolgung in den Header oder auf den ersten Bildschirm, sie ist die meistgenutzte Funktion der Seite. In der Frachtanfrage sehen Versender an Lademetern und Fahrzeug sofort, ob die Anfrage passt. Halte die Laufzeiten aktuell, an ihnen messen Kunden dein Versprechen.

Spedition und Logistik

SendungsverfolgungNeu in 1.2

Eine Sendungsnummer eingeben. Ein Lkw fährt beim Scrollen über die fünf Schritte, die Schritte leuchten nacheinander auf und der Verlauf kommt Eintrag für Eintrag. Unbekannte Nummern bekommen einen hilfreichen Hinweis.

Netz und StandorteNeu in 1.2

Hubs, Depots und Partner auf einer gezeichneten Karte, die Strecken zeichnen sich beim Scrollen nacheinander ein. Auf einen Standort zeigen oder ihn wählen, ein Ring pulsiert und Lager, Rampen, Leistungen und Telefon wechseln.

FlotteNeu in 1.2

Fahrzeugtypen maßstabsgetreu gegen einen 13,6-Meter-Auflieger gezeichnet. Der Lkw fährt mit drehenden Rädern herein, die Paletten füllen den Ladeplan von vorn, die Nutzlast zählt zu ihrem Wert.

FrachtanfrageNeu in 1.2

Strecke, Fracht, Paletten, Gewicht und Extras. Die Übersicht füllt einen gezeichneten Auflieger Palette für Palette, zählt die Lademeter und nennt das passende Fahrzeug. Pflichtfelder erklären sich beim Absenden.

LaufzeitenNeu in 1.2

Linien ab dem gewählten Depot mit Laufzeit, Buchungsschluss und Abfahrtstagen, die Zeitbalken wachsen beim Scrollen. Eine Postleitzahl eingeben, die passende Linie leuchtet auf und die Antwort nennt den Buchungsschluss.

Details

Was Spedition und Logistik mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.0 · seit 1.2.0
Datei
components/ui/logistics.tsx
Bringt mit
utilskitbuttoniconsectionmotioninputcheckbox
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 81 eigene Texte
Studio
Im Code anpassen

Props

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

  • variantoptional
    LogisticsVariant

    trackingnetworkfleetquotetransit-times

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • shipmentsoptional
    Shipment[]

    tracking

  • defaultNumberoptional
    string

    tracking: number shown on load

  • locationsoptional
    LogisticsLocation[]

    network

  • vehiclesoptional
    LogisticsVehicle[]

    fleet, quote (the vehicle that fits)

  • onSubmitoptional
    (data: FreightQuote) => void

    quote

  • originsoptional
    { id: string; name: string }[]

    transit-times

  • lanesoptional
    TransitLane[]

Eingebaute Texte

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

Alle 81 Texte anzeigen
numberEnglisch Tracking numberDeutsch Sendungsnummer
numberHintEnglisch You find it on the delivery note, for example {example}Deutsch Sie steht auf dem Lieferschein, zum Beispiel {example}
findEnglisch Track shipmentDeutsch Sendung verfolgen
requiredEnglisch Please fill in this field.Deutsch Bitte füllen Sie dieses Feld aus.
notFoundEnglisch We could not find this number. Please check it against your delivery note.Deutsch Diese Nummer finden wir nicht. Bitte gleichen Sie sie mit dem Lieferschein ab.
bookedEnglisch BookedDeutsch Gebucht
picked-upEnglisch Picked upDeutsch Abgeholt
in-transitEnglisch On the wayDeutsch Unterwegs
out-for-deliveryEnglisch Out for deliveryDeutsch In Zustellung
deliveredEnglisch DeliveredDeutsch Zugestellt
etaEnglisch Expected deliveryDeutsch Voraussichtliche Zustellung
deliveredOnEnglisch DeliveredDeutsch Zugestellt
historyEnglisch HistoryDeutsch Verlauf
fromEnglisch FromDeutsch Von
toEnglisch ToDeutsch Nach
locationsEnglisch LocationsDeutsch Standorte
hubEnglisch HubDeutsch Hub
depotEnglisch DepotDeutsch Depot
partnerEnglisch PartnerDeutsch Partner
areaEnglisch WarehouseDeutsch Lager
sqmEnglisch {n} m²Deutsch {n} m²
docksEnglisch Loading docksDeutsch Rampen
hoursEnglisch Opening hoursDeutsch Öffnungszeiten
callEnglisch Call {name}Deutsch {name} anrufen
vehicleEnglisch VehicleDeutsch Fahrzeug
payloadEnglisch PayloadDeutsch Nutzlast
kgEnglisch {n} kgDeutsch {n} kg
palletsEnglisch Euro palletsDeutsch Europaletten
volumeEnglisch VolumeDeutsch Volumen
m3Englisch {n} m³Deutsch {n} m³
innerEnglisch Load spaceDeutsch Laderaum
dimsEnglisch {l} × {w} × {h} mDeutsch {l} × {w} × {h} m
inFleetEnglisch {n} in our fleetDeutsch {n} in unserer Flotte
loadPlanEnglisch Load plan from aboveDeutsch Ladeplan von oben
lengthMEnglisch {n} mDeutsch {n} m
routeEnglisch RouteDeutsch Strecke
pickupEnglisch Pickup postcode and townDeutsch Abholung, PLZ und Ort
deliveryEnglisch Delivery postcode and townDeutsch Zustellung, PLZ und Ort
dateEnglisch Pickup dateDeutsch Abholdatum
freightEnglisch FreightDeutsch Fracht
groupageEnglisch GroupageDeutsch Stückgut
partEnglisch Part loadDeutsch Teilladung
fullEnglisch Full loadDeutsch Komplettladung
chilledEnglisch ChilledDeutsch Kühlware
palletsNEnglisch PalletsDeutsch Paletten
lessEnglisch One pallet lessDeutsch Eine Palette weniger
moreEnglisch One pallet moreDeutsch Eine Palette mehr
weightEnglisch Total weightDeutsch Gesamtgewicht
extrasEnglisch ExtrasDeutsch Extras
tailLiftEnglisch Tail lift at deliveryDeutsch Hebebühne bei Zustellung
noticeEnglisch Call before deliveryDeutsch Anruf vor Zustellung
dangerousEnglisch Dangerous goodsDeutsch Gefahrgut
companyEnglisch CompanyDeutsch Firma
nameEnglisch NameDeutsch Name
emailEnglisch EmailDeutsch E-Mail
phoneEnglisch PhoneDeutsch Telefon
invalidEmailEnglisch Please enter a valid email address.Deutsch Bitte geben Sie eine gültige E-Mail-Adresse ein.
invalidWeightEnglisch Please enter the weight in kg.Deutsch Bitte geben Sie das Gewicht in kg an.
summaryEnglisch Your freightDeutsch Ihre Fracht
ldmEnglisch Loading metresDeutsch Lademeter
fitsEnglisch Fits intoDeutsch Passt in
tooBigEnglisch We split this freight over several vehiclesDeutsch Diese Fracht verteilen wir auf mehrere Fahrzeuge
sendEnglisch Request a quoteDeutsch Angebot anfordern
sentEnglisch Thank you, your request is with dispatchDeutsch Danke, Ihre Anfrage ist bei der Disposition
sentTextEnglisch You receive a fixed price by email, usually within two hours on working days.Deutsch Sie bekommen einen Festpreis per E-Mail, an Werktagen meist innerhalb von zwei Stunden.
againEnglisch Request another quoteDeutsch Weiteres Angebot anfordern
originEnglisch Depart fromDeutsch Abfahrt ab
checkEnglisch Postcode of the recipientDeutsch Postleitzahl des Empfängers
checkHintEnglisch Shows the lane and the transit timeDeutsch Zeigt Linie und Laufzeit
checkBtnEnglisch Check transit timeDeutsch Laufzeit prüfen
codeErrorEnglisch Please enter at least the first two digits of the postcode.Deutsch Bitte geben Sie mindestens die ersten zwei Ziffern der Postleitzahl ein.
regionEnglisch RegionDeutsch Region
codesEnglisch PostcodesDeutsch PLZ
codesNEnglisch {a} to {b}Deutsch {a} bis {b}
transitEnglisch Transit timeDeutsch Laufzeit
hoursNEnglisch {n} hDeutsch {n} Std.
cutoffEnglisch Book byDeutsch Buchen bis
daysEnglisch DeparturesDeutsch Abfahrten
expressEnglisch ExpressDeutsch Express
answerEnglisch Book by {time}, the freight arrives within {n} hours.Deutsch Bis {time} buchen, die Fracht ist innerhalb von {n} Stunden da.
noLaneEnglisch For this postcode we arrange a partner lane. Ask dispatch for the transit time.Deutsch Für diese Postleitzahl fahren wir mit einem Partner. Die Laufzeit nennt Ihnen die Disposition.

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Spedition und Logistik reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-invalid, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen img, radio, radiogroup, search und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • 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

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Spedition und Logistik?

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

Welche Varianten hat Spedition und Logistik?

5 Varianten, Sendungsverfolgung, Netz und Standorte, Flotte, Frachtanfrage und Laufzeiten. Du wählst sie mit der Prop variant, zum Beispiel variant="network".

Kann ich die Texte von Spedition und Logistik übersetzen?

Ja. Spedition und Logistik bringt 81 eigene Texte auf Deutsch und Englisch mit, etwa „Sendungsnummer“, „Sendung verfolgen“ und „Bitte füllen Sie dieses Feld aus.“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Spedition und Logistik einbauen?

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

Oft gesucht

Direkt zu

In die Zwischenablage kopiert