Tailwind CSS Order Tracking

Tailwind CSS Order Tracking is collection of components designed to facilitate tracking and management of orders within a web application or e-commerce website.

Documentation Get figma file Switch to Old UI

Order tracking with cards

This component can be used to show a tracking events and a set of cards where you can show the order information.

Vertical order tracking timeline

Following example shows list of purchased items alongside progess step of order status and google map indication.

Order tracking with location indication

This example shows order tracking with location indication using google map, where you can monitor the progess and location of purchased items.

Order tracking with progress indication

Use below example tailwind css order tracking example to show all purchased items list with there details and order tracking progress steps with different indications which indicates shipping order status.

Order tracking with vertical timeline

Use this tailwind order tracking component to show a vertical timeline of the shipping order status and an overview of the purchased items along with list of orders and order summary.

Order tracking with map indication

Use below example to show a list of tracking events along with purchased items list in a tabular format with map indication for precise order tracking

Side by side order tracking

Following example shows order details next to order tracking steps where it shows order received, order pickup, estimate delivery time etc.

Order tracking with CTA

This example shows order tracking process with CTA buttons, where you can download invoice of orders. It also shows order details with images of purchased items.

Order tracking with horizontal steps

This Tailwind Order tracking example shows order tracking with horizontal steps, where you can track your order status with detailed steps like order confirmed, shipping and delivery estimates.

Default order tracking

Following this example to show a timeline of the status of a product ordered from an e-commerce website after the purchase has been completed by the customer.