Order Tracking Blocks based on shadcn/ui
Order tracking form with map background. Features tracking number input, email/order number fields, and featured product showcase. Perfect for ecommerce order tracking pages.
Track Your Order
Stay updated on the status of your order every step of the way. Simply enter your order details to see where your package is and when it's expected to arrive.
Enter Your Order Details
To track your order, please provide your order number and email address associated with the purchase.
Or
Featured Products
Permanent Collection
Premium Suit
$490
Permanent Collection
Premium Suit
$490
Permanent Collection
Wool Suit
$490
Sale
Cotton Suit
$1,300
$1,300
import TrackOrderForm from "../track-order-form"
export default function Page() {
return <TrackOrderForm />
}
Compact tracking card with vertical timeline showing delivery status. Includes shipping address, payment details, and order summary. Perfect for order status modals or sidebar displays.
Track your parcel #123456789
Order placed on April 1, 2024
Status: Arrived on UPS location
Delivered
Estimated date: April 9, 2024
Out for Delivery
11:00 PM April 4, 2024
Shipped
10:00 PM April 3, 2024
Order Placed
10:00 PM April 1, 2024
Shipping Address
John Doe
1234 Elm Street, Suite 567, Los Angeles, CA 90001, United States
+1 (555) 123-4567
Payment Details
Visa 1234
Expiry 06/2026
Subtotal
$790
Shipping estimate
$0
Tax estimate
$5
Order Total
$795
import CompactTrackParcel from "../compact-track-parcel"
export default function Page() {
return <CompactTrackParcel />
}
Order tracking page with responsive horizontal/vertical timeline. Features product image, delivery address, billing information, and order summary. Perfect for detailed order status pages.
Order ID 1234
Order placed on April 1, 2024
Premium Suit
$790
The time is now for it to be okay to be great. People in this world shun people for being great.
Size: M
Delivery Address
362 Ridgewood, Alaska 99669, USA.
Shipping Updates
[email protected] (307) 682-8835
Preparing to ship on April 3, 2024
Order Placed
10:00 PM April 1, 2024
Shipped
10:00 PM April 3, 2024
Out for Delivery
11:00 PM April 3, 2024
Delivered
Estimated date: April 9, 2024
Billing Address
362 Ridgewood Dr,
Soldotna, Alaska 99669, USA
Payment information
Visa 1234
Expiry 06/2026
Subtotal
$1,780.00
Shipping estimate
$0
Tax estimate
$5
Order Total
$790
import OrderTrackingTimeline from "@/components/creative-tim/blocks/order-tracking-timeline"
export default function Page() {
return <OrderTrackingTimeline />
}
Order details page with tracking information form. Features carrier name, shipment ID, tracking link inputs, timeline stepper, and product list. Perfect for admin order management.
Order Details #123456789
Order placed on April 1, 2025
Order Placed
10:00 PM April 1, 2025
Delivered to the Courier
11:00 PM April 3, 2025
Delivery
Estimated date: April 9, 2025
Items
Premium Suit
CLTH-4567-MN
Size: M
1x
$790.00
Classic Leather Jacket
JKT-8923-BLK
Size: M
1x
$990.00
Subtotal
$1,780.00
Shipping estimate
$0.00
Order Total
$1,780.00
import OrderTrackingForm from "@/components/creative-tim/blocks/order-tracking-form"
export default function Page() {
return <OrderTrackingForm />
}
Order tracking page with map visualization of shipping destination. Features timeline stepper, product list, billing summary, and editable shipping address. Perfect for visual order tracking.
Order Details
Order placed on April 1, 2024
Shipping to
John Doe, Suite 567 Los
Angeles, CA 90001
Order Placed
10:00 PM April 1, 2024
Shipped
10:00 PM April 3, 2024
Out for Delivery
11:00 PM April 3, 2024
Delivered
Estimated date: April 9, 2024
Product List
Premium Suit
CLTH-4567-MN
Size: M
1x
$790
Classic Leather Jacket
JKT-8923-BLK
Size: M
1x
$990
Billing Address
362 Ridgewood Dr, Soldotna, Alaska 99669, USA
Shipping Address
362 Ridgewood Dr, Soldotna, Alaska 99669, USA
import OrderWithMap from "@/components/creative-tim/blocks/order-with-map"
export default function Page() {
return <OrderWithMap />
}
Comprehensive order management interface with editable address forms. Features timeline stepper, product list, shipping address editor, billing details, and text alert subscription. Perfect for customer order management portals.
Order Details #123456789
Order placed on April 1, 2024
Status: Arrived on UPS location
Order Placed
10:00 PM April 1, 2024
Order Placed
10:00 PM April 1, 2024
Shipped
10:00 PM April 3, 2024
Shipped
10:00 PM April 3, 2024
Out for Delivery
11:00 PM April 3, 2024
Out for Delivery
11:00 PM April 3, 2024
Delivered
Estimated date: April 9, 2024
Delivered
Estimated date: April 9, 2024
Premium Suit
CLTH-4567-MN
Size: M
1x
$790
Classic Leather Jacket
JKT-8923-BLK
Size: M
1x
$990
Shipping Tax
$0
Order Total
$1,780
Billing
Same as shipping address
Shipping Address
John Doe
1234 Elm Street, Suite 567, Los Angeles, CA 90001, United States
+1 (555) 123-4567
Stay Informed with Text Alerts
Sign up for text notifications to receive updates on your order status instantly. Message and data rates may apply.
import ComprehensiveOrderDetails from "@/components/creative-tim/blocks/comprehensive-order-details"
export default function Page() {
return <ComprehensiveOrderDetails />
}
Complete order details page with timeline stepper, product list, and order summary. Features editable shipping and billing addresses, downloadable invoice. Perfect for customer order history pages.
Order Details
Order placed on April 1, 2025
Date Ordered
April 1, 2025
Order Number
#123456789
Order Placed
10:00 PM April 1, 2025
Shipped
Not yet shipped
Out for Delivery
Pending
Delivered
Estimated date: April 9, 2025
Product List
Premium Suit
Premium Wool Blend (80% Wool, 20% Polyester)
Size: M
1x
$790.00
Classic Leather Jacket
Premium Leather (100% Genuine Leather)
Size: M
1x
$990.00
Shipping Address
John Doe
1234 Elm Street
Suite 567
Los Angeles, CA 90001
United States
+1 (555) 123-4567
Billing Address
Same as shipping address
Order Summary
Subtotal
$1,780.00
Shipping estimate
$0
Tax estimate
$5
Order Total
$1,785.00
import OrderDetailsWithTimeline from "@/components/creative-tim/blocks/order-details-with-timeline"
export default function Page() {
return <OrderDetailsWithTimeline />
}