shadcn.io is not affiliated with official shadcn/ui
Order Tracking Kanban Block for Radix UI
An order board of eleven orders in Placed, Packed, Shipped and Delivered, with a total in whole cents per stage and a Print label button that issues the tracking code an order needs to ship.
Installation
Overview
Follow orders from checkout to the door with this order tracking kanban for React with Radix UI. A hairline frame with a plus mark on each corner holds four stages that share their lines (Placed, Packed, Shipped and Delivered) and eleven orders. Each card shows the order number in mono, its total, its item count, the buyer's initials and either its tracking code in mono or a "Print label" Button. Every stage head counts its orders and adds up their totals, kept in whole cents so the sums are exact, and the sentence under the heading says how much is still on its way. An order can't be shipped without a tracking code, and the refusal says to print its label first; printing issues the next code on a fixed roll. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The frame is ruled by Guides. On a phone the stages scroll sideways in one named region. For small shops, fulfilment desks and any flow where a step needs a reference number.
FAQ
How do I fill it with my own orders?
Edit COLUMNS, LABELS and START. An order has an id, a title (its number), buyer initials, items, cents for the total, a tracking code (empty until a label is printed) and the column it starts in. LABELS is the roll of codes that "Print label" hands out, in order.
Why are the totals whole cents?
Adding decimal dollars drifts (0.1 + 0.2), so each order holds an integer number of cents and only moneyOf turns it into "$240.00", with a hoisted regex for the thousands separators. A stage total is a sum of integers, so it is exact and always matches the cards. Keep to cents when you wire it to a real order API.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the order's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. A step into Shipped or Delivered without a tracking code is refused in the status line and the order stays where it was. Every step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists every stage under "Move to" with the current one ticked, so one choice moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch.
What stays in the demo, and how do I save it?
Everything: The moves and the printed labels live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. To save for real, call your carrier API from act (Print label) and your orders API from put (every finished move), then update the cards from the response. The product, the people and the cards are made up.
How does it look on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps when a card moves. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card.