orders history shipping status widget order history recent orders purchase list order status delivery history show recent orders display order history list list past purchases with status
Order History Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/shipping-widget/order-history.json order-history.html
<div class="ws-shipping-widget rounded-2xl border p-6 max-w-md mx-auto"
style="background: var(--ws-shipping-widget-bg); color: var(--ws-shipping-widget-text); border-color: var(--ws-shipping-widget-border);">
<h2 class="text-lg font-semibold tracking-tight mb-4"
style="color: var(--ws-shipping-widget-text);">Recent Orders</h2>
<div class="divide-y" style="border-color: var(--ws-shipping-widget-border);">
<!-- Order 1: Delivered -->
<div class="flex items-center justify-between py-3 gap-4">
<div class="flex flex-col gap-0.5 min-w-0">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold" style="color: var(--ws-shipping-widget-text);">#WS-2831</span>
<span class="text-xs rounded-full px-2 py-0.5 font-medium"
style="background: color-mix(in oklch, var(--ws-shipping-widget-success) 12%, transparent); color: var(--ws-shipping-widget-success);">Delivered</span>
</div>
<span class="text-xs" style="color: var(--ws-shipping-widget-text-muted);">Mar 14, 2026 · 3 items</span>
</div>
<span class="text-sm font-semibold tabular-nums whitespace-nowrap"
style="color: var(--ws-shipping-widget-text);">$124.90</span>
</div>
<!-- Order 2: In Transit -->
<div class="flex items-center justify-between py-3 gap-4">
<div class="flex flex-col gap-0.5 min-w-0">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold" style="color: var(--ws-shipping-widget-text);">#WS-2847</span>
<span class="text-xs rounded-full px-2 py-0.5 font-medium"
style="background: color-mix(in oklch, var(--ws-shipping-widget-accent) 12%, transparent); color: var(--ws-shipping-widget-accent);">In Transit</span>
</div>
<span class="text-xs" style="color: var(--ws-shipping-widget-text-muted);">Mar 18, 2026 · 1 item</span>
</div>
<span class="text-sm font-semibold tabular-nums whitespace-nowrap"
style="color: var(--ws-shipping-widget-text);">$59.00</span>
</div>
<!-- Order 3: Processing -->
<div class="flex items-center justify-between py-3 gap-4">
<div class="flex flex-col gap-0.5 min-w-0">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold" style="color: var(--ws-shipping-widget-text);">#WS-2853</span>
<span class="text-xs rounded-full px-2 py-0.5 font-medium"
style="background: color-mix(in oklch, oklch(0.8 0.15 85) 12%, transparent); color: oklch(0.65 0.15 85);">Processing</span>
</div>
<span class="text-xs" style="color: var(--ws-shipping-widget-text-muted);">Mar 21, 2026 · 5 items</span>
</div>
<span class="text-sm font-semibold tabular-nums whitespace-nowrap"
style="color: var(--ws-shipping-widget-text);">$287.50</span>
</div>
<!-- Order 4: Cancelled -->
<div class="flex items-center justify-between py-3 gap-4">
<div class="flex flex-col gap-0.5 min-w-0">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold" style="color: var(--ws-shipping-widget-text);">#WS-2819</span>
<span class="text-xs rounded-full px-2 py-0.5 font-medium"
style="background: color-mix(in oklch, oklch(0.65 0.2 25) 12%, transparent); color: oklch(0.65 0.2 25);">Cancelled</span>
</div>
<span class="text-xs" style="color: var(--ws-shipping-widget-text-muted);">Mar 10, 2026 · 2 items</span>
</div>
<span class="text-sm font-semibold tabular-nums whitespace-nowrap line-through"
style="color: var(--ws-shipping-widget-text-muted);">$42.00</span>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
ordershistoryshippingstatuswidget
Recent orders list widget displaying order number, date, item count, and total price. Each order has a color-coded status badge: Delivered (green), In Transit (accent), Processing (yellow), and Cancelled (red with strikethrough price).