Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Order Fulfillment Todo List Block for Vue

A pick and pack list: orders open to their lines with checkboxes, a five-step track, and one button that marks packed, then shipped with a checked tracking code, then delivered.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Run a warehouse pick list, with this order fulfillment block for Vue with Ark UI. Orders are Collapsible rows with their id, line and item counts and the step they are on. Opening one shows a five-step track (Received, Picked, Packed, Shipped, Delivered) drawn as dots and named in words, and its lines, each a Checkbox with the item, quantity and bin, under "Picked 2 of 3". One Shine Button on the open order changes with the step: "Mark packed" once every line is picked, then "Mark shipped" with a tracking code in the TRK-123456 format in a Field (a wrong code says so and keeps focus), then "Mark delivered". The list keeps its height, so opening an order scrolls inside it. No payments or addresses are shown. Guides rule the bands. For warehouses, kitchens and any list where an item passes through steps.

FAQ

How is the step worked out?

It is derived, never stored twice: Delivered if the order is delivered, Shipped if it has shipped, Packed if it was marked packed, Picked if every line is ticked, otherwise Received. Un-ticking a line before packing moves the order back a step.

What if I press Mark packed too early?

The button stays focusable but is marked unavailable; pressing it says how many lines are still to pick instead of doing nothing. Once an order is packed its lines are locked.

How is the tracking code checked?

It must be TRK- followed by six digits, such as TRK-482913. Letters are upper-cased as you type. A wrong code shows a message under the field, sets the field as invalid and returns focus to it.

What stays local, and how do I wire it for real?

Everything lives in the page and resets on reload; nothing is shipped or emailed. Post each pick, pack and ship from pick and advance to your orders API, and replace the pattern with your carrier's.

How do I use it from the keyboard?

Each order header is a button that opens it, the checkboxes are in tab order, and the tracking field and the action button follow them. After packing, focus moves to the tracking field.

How does it look on a phone?

The five steps share one row with short labels, the lines stack as full-width rows, and the tracking field sits above the button.

All 100 todo list blocks