Skip to content
UI Kit
Accent color

Logistics website sections

For freight forwarders, hauliers and logistics companies. Shipment tracking, the network on a drawn map, the fleet to scale, a freight quote and transit times by postcode.

5 variants
Switch category

Every pallet on its way

Shippers come to a forwarder's website to track a delivery, get a price or check how long it takes. These sections serve all three, and they show the network and the fleet that stand behind the promise. Maps and trucks are drawn, so the page works on its own.

Shipment tracking takes a number and moves a truck along five steps with the history entry by entry, unknown numbers get a helpful message. Network and locations draws hubs, depots and partners on a map, the chosen location shows its warehouse, docks, services and phone. Fleet draws vehicle types to scale against a 13.6 metre trailer and fills the load plan with pallets. Freight quote asks route, freight, pallets, weight and extras, counts the loading metres and names the vehicle that fits. Transit times lists lanes from the chosen depot with booking deadline and departure days and finds the lane for a postcode.

Put tracking in the header or on the first screen, it is the most used function on the site. In the freight quote, loading metres and vehicle tell a shipper at once whether the request fits. Keep transit times current, they are the promise customers measure you by.

Logistics

Shipment trackingNew in 1.2

Enter a tracking number. A truck moves along the five steps while scrolling, the steps light up one after another and the history comes in entry by entry. Unknown numbers get a helpful message.

Network and locationsNew in 1.2

Hubs, depots and partners on a drawn map, the routes draw in one after another while scrolling. Point at a location or pick it, a ring pulses and its warehouse, docks, services and phone swap in.

FleetNew in 1.2

Vehicle types drawn to scale against a 13.6 metre trailer. The truck drives in with turning wheels, the pallets fill the load plan from the front, the payload counts to its value.

Freight quoteNew in 1.2

Route, freight, pallets, weight and extras. The summary fills a drawn trailer pallet by pallet, counts the loading metres and names the vehicle that fits. Required fields explain themselves on sending.

Transit timesNew in 1.2

Lanes from the chosen depot with transit time, booking deadline and departure days, the time bars grow while scrolling. Enter a postcode, the matching lane lights up and the answer names the deadline.

Details

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

Area
Industries
Variants
5
Version
1.0.0 · since 1.2.0
File
components/ui/logistics.tsx
Brings along
utilskitbuttoniconsectionmotioninputcheckbox
npm packages
None
Languages
English and German, 81 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The LogisticsProps interface from components/ui/logistics.tsx, with the comments from the code.

  • 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[]

Built-in texts

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

Show all 81 texts
numberEnglish Tracking numberGerman Sendungsnummer
numberHintEnglish You find it on the delivery note, for example {example}German Sie steht auf dem Lieferschein, zum Beispiel {example}
findEnglish Track shipmentGerman Sendung verfolgen
requiredEnglish Please fill in this field.German Bitte füllen Sie dieses Feld aus.
notFoundEnglish We could not find this number. Please check it against your delivery note.German Diese Nummer finden wir nicht. Bitte gleichen Sie sie mit dem Lieferschein ab.
bookedEnglish BookedGerman Gebucht
picked-upEnglish Picked upGerman Abgeholt
in-transitEnglish On the wayGerman Unterwegs
out-for-deliveryEnglish Out for deliveryGerman In Zustellung
deliveredEnglish DeliveredGerman Zugestellt
etaEnglish Expected deliveryGerman Voraussichtliche Zustellung
deliveredOnEnglish DeliveredGerman Zugestellt
historyEnglish HistoryGerman Verlauf
fromEnglish FromGerman Von
toEnglish ToGerman Nach
locationsEnglish LocationsGerman Standorte
hubEnglish HubGerman Hub
depotEnglish DepotGerman Depot
partnerEnglish PartnerGerman Partner
areaEnglish WarehouseGerman Lager
sqmEnglish {n} m²German {n} m²
docksEnglish Loading docksGerman Rampen
hoursEnglish Opening hoursGerman Öffnungszeiten
callEnglish Call {name}German {name} anrufen
vehicleEnglish VehicleGerman Fahrzeug
payloadEnglish PayloadGerman Nutzlast
kgEnglish {n} kgGerman {n} kg
palletsEnglish Euro palletsGerman Europaletten
volumeEnglish VolumeGerman Volumen
m3English {n} m³German {n} m³
innerEnglish Load spaceGerman Laderaum
dimsEnglish {l} × {w} × {h} mGerman {l} × {w} × {h} m
inFleetEnglish {n} in our fleetGerman {n} in unserer Flotte
loadPlanEnglish Load plan from aboveGerman Ladeplan von oben
lengthMEnglish {n} mGerman {n} m
routeEnglish RouteGerman Strecke
pickupEnglish Pickup postcode and townGerman Abholung, PLZ und Ort
deliveryEnglish Delivery postcode and townGerman Zustellung, PLZ und Ort
dateEnglish Pickup dateGerman Abholdatum
freightEnglish FreightGerman Fracht
groupageEnglish GroupageGerman Stückgut
partEnglish Part loadGerman Teilladung
fullEnglish Full loadGerman Komplettladung
chilledEnglish ChilledGerman Kühlware
palletsNEnglish PalletsGerman Paletten
lessEnglish One pallet lessGerman Eine Palette weniger
moreEnglish One pallet moreGerman Eine Palette mehr
weightEnglish Total weightGerman Gesamtgewicht
extrasEnglish ExtrasGerman Extras
tailLiftEnglish Tail lift at deliveryGerman Hebebühne bei Zustellung
noticeEnglish Call before deliveryGerman Anruf vor Zustellung
dangerousEnglish Dangerous goodsGerman Gefahrgut
companyEnglish CompanyGerman Firma
nameEnglish NameGerman Name
emailEnglish EmailGerman E-Mail
phoneEnglish PhoneGerman Telefon
invalidEmailEnglish Please enter a valid email address.German Bitte geben Sie eine gültige E-Mail-Adresse ein.
invalidWeightEnglish Please enter the weight in kg.German Bitte geben Sie das Gewicht in kg an.
summaryEnglish Your freightGerman Ihre Fracht
ldmEnglish Loading metresGerman Lademeter
fitsEnglish Fits intoGerman Passt in
tooBigEnglish We split this freight over several vehiclesGerman Diese Fracht verteilen wir auf mehrere Fahrzeuge
sendEnglish Request a quoteGerman Angebot anfordern
sentEnglish Thank you, your request is with dispatchGerman Danke, Ihre Anfrage ist bei der Disposition
sentTextEnglish You receive a fixed price by email, usually within two hours on working days.German Sie bekommen einen Festpreis per E-Mail, an Werktagen meist innerhalb von zwei Stunden.
againEnglish Request another quoteGerman Weiteres Angebot anfordern
originEnglish Depart fromGerman Abfahrt ab
checkEnglish Postcode of the recipientGerman Postleitzahl des Empfängers
checkHintEnglish Shows the lane and the transit timeGerman Zeigt Linie und Laufzeit
checkBtnEnglish Check transit timeGerman Laufzeit prüfen
codeErrorEnglish Please enter at least the first two digits of the postcode.German Bitte geben Sie mindestens die ersten zwei Ziffern der Postleitzahl ein.
regionEnglish RegionGerman Region
codesEnglish PostcodesGerman PLZ
codesNEnglish {a} to {b}German {a} bis {b}
transitEnglish Transit timeGerman Laufzeit
hoursNEnglish {n} hGerman {n} Std.
cutoffEnglish Book byGerman Buchen bis
daysEnglish DeparturesGerman Abfahrten
expressEnglish ExpressGerman Express
answerEnglish Book by {time}, the freight arrives within {n} hours.German Bis {time} buchen, die Fracht ist innerhalb von {n} Stunden da.
noLaneEnglish For this postcode we arrange a partner lane. Ask dispatch for the transit time.German Für diese Postleitzahl fahren wir mit einem Partner. Die Laufzeit nennt Ihnen die Disposition.

Accessibility

Read from the source of the component.

  • Logistics handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
  • Sets aria-checked, aria-invalid, aria-label and aria-live, so screen readers announce purpose and state.
  • Uses the roles img, radio, radiogroup, search and status.
  • Announces changes through a live region without moving focus.
  • 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

  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 3 places in the code switch motion off then.

Frequent questions

How do I install Logistics?

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

Which variants does Logistics have?

5 variants, Shipment tracking, Network and locations, Fleet, Freight quote and Transit times. You pick one with the variant prop, for example variant="network".

Can I translate the texts of Logistics?

Yes. Logistics carries 81 texts of its own in English and German, such as “Tracking number”, “Track shipment” and “Please fill in this field.”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Logistics?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Logistics on a page.

Often searched

Jump to

Copied to the clipboard