Skip to content
UI Kit
Accent color

Orders and returns

Everything after the purchase, from order history and tracking to invoice, returns and subscriptions.

5 variants
Switch category

Orders

Order history

All orders with status, filters by tab and actions per order.

Order detail

Delivery stages, the full tracking history, items, addresses and totals.

Invoice

A complete invoice with net, VAT and gross, laid out for paper. Print hides everything else.

Returns

Pick items and reasons, choose refund and drop-off, see the refund add up.

Subscription

Next delivery, rhythm, quantity, skip and pause, with past deliveries.

Details

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

Area
E-Commerce
Variants
5
Version
1.0.1 · since 1.0.0
File
components/ui/order.tsx
Brings along
utilskitbuttoniconrevealproduct-image
npm packages
None
Languages
English and German, 104 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The OrderProps interface from components/ui/order.tsx, with the comments from the code.

  • variantoptional
    OrderVariant

    order-historyorder-detailinvoicereturnssubscription

  • ordersoptional
    OrderRecord[]

    order-history

  • orderoptional
    OrderRecord

    order-detail and returns

  • invoiceoptional
    InvoiceData
  • subscriptionoptional
    SubscriptionData
  • returnReasonsoptional
    string[]

    returns

  • returnByoptional
    string
  • currencyoptional
    string

Built-in texts

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

Show all 104 texts
ordersEnglish OrdersGerman Bestellungen
ordersIntroEnglish Track, return or buy again. Invoices are ready as soon as an order ships.German Verfolgen, zurückschicken oder nachbestellen. Rechnungen liegen bereit, sobald eine Bestellung verschickt ist.
allEnglish AllGerman Alle
openEnglish OpenGerman Offen
deliveredEnglish DeliveredGerman Zugestellt
returnedEnglish ReturnedGerman Retourniert
orderEnglish OrderGerman Bestellung
placedEnglish PlacedGerman Bestellt am
totalEnglish TotalGerman Summe
statusEnglish StatusGerman Status
processingEnglish ProcessingGerman In Bearbeitung
shippedEnglish On the wayGerman Unterwegs
cancelledEnglish CancelledGerman Storniert
viewOrderEnglish View orderGerman Bestellung ansehen
buyAgainEnglish Buy againGerman Erneut kaufen
invoiceEnglish InvoiceGerman Rechnung
moreEnglish moreGerman weitere
noOrdersEnglish No orders in this view.German In dieser Ansicht gibt es keine Bestellungen.
backToOrdersEnglish All ordersGerman Alle Bestellungen
helpEnglish Get helpGerman Hilfe erhalten
shipmentEnglish ShipmentGerman Sendung
etaEnglish ExpectedGerman Voraussichtlich
trackingNoEnglish Tracking numberGerman Sendungsnummer
copyEnglish Copy tracking numberGerman Sendungsnummer kopieren
copiedEnglish CopiedGerman Kopiert
stagesEnglish Ordered,Packed,On the way,DeliveredGerman Bestellt,Verpackt,Unterwegs,Zugestellt
historyEnglish Tracking historyGerman Sendungsverlauf
itemsEnglish ItemsGerman Artikel
deliveryAddressEnglish Delivery addressGerman Lieferadresse
billingAddressEnglish Billing addressGerman Rechnungsadresse
paymentEnglish PaymentGerman Zahlung
summaryEnglish SummaryGerman Übersicht
subtotalEnglish SubtotalGerman Zwischensumme
shippingEnglish ShippingGerman Versand
freeEnglish FreeGerman Kostenlos
vatEnglish VATGerman MwSt.
inclEnglish incl.German inkl.
qtyEnglish QtyGerman Menge
printEnglish Print or save as PDFGerman Drucken oder als PDF sichern
printShortEnglish PrintGerman Drucken
downloadEnglish DownloadGerman Herunterladen
invoiceTitleEnglish InvoiceGerman Rechnung
invoiceNoEnglish Invoice no.German Rechnungsnr.
invoiceDateEnglish Invoice dateGerman Rechnungsdatum
serviceDateEnglish Delivery dateGerman Lieferdatum
orderNoEnglish Order no.German Bestellnr.
customerNoEnglish Customer no.German Kundennr.
billToEnglish Bill toGerman Rechnung an
posEnglish Pos.German Pos.
descriptionEnglish DescriptionGerman Beschreibung
unitNetEnglish Unit price netGerman Einzelpreis netto
amountNetEnglish Amount netGerman Betrag netto
netTotalEnglish Total netGerman Summe netto
grossTotalEnglish TotalGerman Gesamtbetrag
vatIdEnglish VAT IDGerman USt-IdNr.
bankEnglish BankGerman Bank
contactEnglish ContactGerman Kontakt
shippingLineEnglish ShippingGerman Versand
returnsTitleEnglish Return itemsGerman Artikel zurücksenden
returnsIntroEnglish Pick what goes back. The label is free, the refund arrives within 5 days after we receive the parcel.German Wähle aus, was zurückgeht. Das Etikett ist kostenlos, das Geld ist innerhalb von 5 Tagen nach Eingang des Pakets zurück.
returnByEnglish Return byGerman Rücksendung bis
reasonEnglish ReasonGerman Grund
chooseReasonEnglish Choose a reasonGerman Grund auswählen
refundToEnglish Refund toGerman Erstattung auf
originalEnglish Original paymentGerman Ursprüngliche Zahlart
originalNoteEnglish Back to the card you paid withGerman Zurück auf die Karte, mit der du bezahlt hast
creditEnglish Store creditGerman Guthaben
creditNoteEnglish 10% extra, usable right awayGerman 10 % extra, sofort einlösbar
dropOffEnglish How it goes backGerman So geht es zurück
shopEnglish Parcel shopGerman Paketshop
shopNoteEnglish Show a QR code, no printer neededGerman QR-Code vorzeigen, kein Drucker nötig
pickupEnglish Pickup at your doorGerman Abholung an der Tür
pickupNoteEnglish Tomorrow between 8 and 18German Morgen zwischen 8 und 18 Uhr
refundEnglish Your refundGerman Deine Erstattung
bonusEnglish Credit bonusGerman Guthaben-Bonus
labelEnglish Return labelGerman Rücksendeetikett
requestEnglish Request returnGerman Rücksendung anmelden
requestedEnglish Return registered, label is on its wayGerman Angemeldet, das Etikett ist unterwegs
selectFirstEnglish Pick at least one item to return.German Wähle mindestens einen Artikel für die Rücksendung.
itemsSelectedEnglish items selectedGerman Artikel ausgewählt
itemSelectedEnglish item selectedGerman Artikel ausgewählt
subTitleEnglish SubscriptionGerman Abo
activeEnglish ActiveGerman Aktiv
pausedEnglish PausedGerman Pausiert
sinceEnglish SinceGerman Seit
nextDeliveryEnglish Next deliveryGerman Nächste Lieferung
everyEnglish EveryGerman Alle
weeksEnglish weeksGerman Wochen
perDeliveryEnglish per deliveryGerman pro Lieferung
saveEnglish You saveGerman Du sparst
deliverNowEnglish Deliver nowGerman Jetzt liefern
skipEnglish SkipGerman Aussetzen
skippedEnglish SkippedGerman Ausgesetzt
unskipEnglish Undo skipGerman Doch liefern
pauseEnglish PauseGerman Pausieren
resumeEnglish ResumeGerman Fortsetzen
upcomingEnglish Upcoming deliveriesGerman Nächste Lieferungen
pastDeliveriesEnglish Past deliveriesGerman Bisherige Lieferungen
manageEnglish ManageGerman Verwalten
cancelEnglish Cancel subscriptionGerman Abo kündigen
changeEnglish ChangeGerman Ändern
frequencyEnglish FrequencyGerman Rhythmus
quantityEnglish Bags per deliveryGerman Tüten pro Lieferung
pausedNoteEnglish No deliveries until you resume. Nothing is charged.German Bis zum Fortsetzen keine Lieferungen. Es wird nichts abgebucht.

Accessibility

Read from the source of the component.

  • Orders handles the keys Arrow left and Arrow right itself.
  • Sets aria-disabled, aria-label, aria-live and aria-selected, so screen readers announce purpose and state.
  • Uses the roles alert, radiogroup, 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).
  • 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 Orders?

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

Which variants does Orders have?

5 variants, Order history, Order detail, Invoice, Returns and Subscription. You pick one with the variant prop, for example variant="order-detail".

Can I translate the texts of Orders?

Yes. Orders carries 104 texts of its own in English and German, such as “Orders”, “Track, return or buy again. Invoices are ready as soon as an order ships.” and “All”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Orders?

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

Similar components

More from E-Commerce, the same area of the kit.

Often combined with

Sections that usually sit next to Orders and returns on a page.

Often searched

Jump to

Copied to the clipboard