shadcn.io is not affiliated with official shadcn/ui
Delivery Tracking Calendar Block for React
Five parcels with a four-stage tracker each and their arrival windows drawn on a Monday-to-Sunday strip, with overlapping windows stacked, a switch between active and delivered parcels, and the chosen parcel's window said in words.
Installation
Overview
Tell people when a parcel will turn up, with this delivery tracker for React with Base UI. It is the week view of Parcelby, a parcel tracker, in a hairline frame with a plus mark on each corner. A Segment Group switches between active and delivered parcels. Under it a strip runs from Monday 12 to Sunday 18 October 2026 and draws each parcel's arrival window on its day, between 08:00 and 20:00, as a bar with the parcel's letter: windows that overlap stack in rows, the chosen parcel's bar is solid, and a delivered parcel's is hollow. Today, Wednesday 14 October, has a ring on its number. Below, five parcels are native radio cards with a name, a shop, a tracking code, a four-stage tracker (Ordered, Shipped, Out for delivery, Delivered) and the arrival day. Choosing one highlights its bar and says "Arrives Thu 15 Oct, 12:00 to 16:00" above the strip and in a polite status message. On a phone the strip scrolls sideways inside its frame. For shops, couriers and any app that promises a window.
FAQ
How do I fill it with my parcels?
Edit PARCELS. Each has a day, a from and to time for the window, a stage from 0 (Ordered) to 3 (Delivered), a lane for where it stacks when windows overlap on a day, a letter, a name, a shop and a tracking code; a delivered parcel also has the time it arrived. WEEK_START is the Monday the strip starts on and OPENS and SPAN_HOURS set the hours it draws.
How do overlapping windows stack?
Each parcel has a lane, and a bar sits at that row inside its day, so two parcels due on the same afternoon sit one above the other instead of on top of each other. The strip has room for three rows. In your app assign lanes by sorting a day's windows by start time and giving each the first row where the one before has ended.
How are the stages shown without colour?
The tracker is four segments, filled up to the current stage, with the stage named in words beside the parcel's name, and a screen reader hears "Stage 3 of 4, Out for delivery" with the window. The strip separates states by form: solid for chosen, tinted for the rest, hollow for delivered, each bar with its letter.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now; the ring on Wednesday and the week it draws come from it. To follow the real date, set AS_OF and WEEK_START from your own clock or server.
How do I choose a parcel with the keyboard?
The parcels are one radio group: Tab reaches it, the arrow keys move between parcels and choose, and the choice is announced with its window. The strip is a scrollable region you can focus to scroll sideways on a small screen. The segment control uses the arrow keys too.