order-tracking

Order Tracking

Order status card led by the arrival estimate, with the delivery steps as a timeline, each with its date and a one-line note, the carrier's tracking number with a copy action, and track and reschedule actions.

States: Default

Parts

Part	File	Does
OrderTracking	OrderTracking.vue	Shows when a parcel arrives and its delivery steps as a timeline, with the tracking number and link.

Styling

Part	Recipe
OrderTracking	order-tracking-parcel
OrderTracking	order-tracking-eta
OrderTracking	meta
OrderTracking	line-title

Install

Writes 3 files into components/sections/order-tracking/. For agents, npx @frontic/ui docs order-tracking prints this reference as markdown; the MCP server serves the same.

Installs with it: badge; button; card; format; stepper; tooltip
npm packages: @lucide/vue; reka-ui

Built from

Badge Button Card Stepper Tooltip

API reference

OrderTracking OrderTracking.vue

Shows when a parcel arrives and its delivery steps as a timeline, with the tracking number and link.

Prop	Type	Default
title*	string	—

description	string	—

status	string	—

steps*	TrackingStep[]	—

current*	number	—

eta	string	—

etaDetail	string	—

carrier	string	—

trackingNumber	string	—

trackingUrl	string	—

trackingNumberLabel	string	'tracking number'

trackLabel	string	'Track parcel'

changeDateLabel	string	'Change delivery date'

copyLabel	string	'Copy tracking number'

copiedLabel	string	'Copied'

surface	'raised' \| 'bare'	'raised'

locale	string	—

class	ClassValue	—

Event	Payload
copy	trackingNumber: string

changeDate	—

Data attribute	Values
data-surface	'raised' \| 'bare'

Recipe order-tracking-parcel	Sets
base: order-tracking-parcel	5 properties

Recipe order-tracking-eta	Sets
base: order-tracking-eta	1 property

Recipe meta	Sets
base: meta	3 properties

Recipe line-title	Sets
base: line-title	2 properties

Example