Overview
One card, four states, built the way a real tracking product works. Each variant carries the tracking number, item name, sender, item count and weight, then changes everything below the fold to match where the parcel actually is. Label created shows the ship-from city and a pickup window. In transit switches to a filled step indicator and a customs-and-hub event list with timestamps. Out for delivery drops in an arrival window, a stops-ahead count, a progress bar and the driver with a call action. Delivered leads with a signed-for confirmation row and collapses the earlier events into a dimmed history. Every state pairs a secondary and a primary action so the card always gives the user something to do: edit address, get updates, track live, view receipt. Status pills, step indicators, event rows, progress bars and the driver block are all separable pieces. All vector, no raster assets.
Highlights
- Refined, production-ready UI composition
- Organized, reusable Figma components
- Clean layout system you can adapt fast
