Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Inventory Stocktake Task List Block for Radix UI

A stocktake sheet with expected and counted columns, a variance word per SKU, a Low badge and Reorder button under each reorder point, a To order line and Finish count that waits for every count.

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

Count the stockroom without a spreadsheet, with this stocktake block for React with Radix UI. A table lists ten SKUs with a mono code, the count the book expects and an Input for what is on the shelf. A variance word is worked out from the two: "Matches", "Short 4" or "Over 1", each with its own arrow or tick. A counted row at or under its reorder point gets a Low Badge and a Reorder button that adds it to the To order line. A Progress bar and "6 of 10 counted" follow your typing. The Shine Button "Finish count" stays inactive until every SKU has a count, and the status line says how many are missing. Guides rule the bands. For stockrooms, kitchens, shops and any count against a book.

FAQ

How are Low and the variance worked out?

The variance is the counted number minus the expected one: zero matches, below is short, above is over. A row is Low when it has a count and the count is at or under its reorderAt number. Both come from small helpers over the rows, so the text always agrees with the numbers.

Why does Finish count stay inactive?

A count isn't finished while a SKU is blank, so the button keeps aria-disabled and stays focusable. Pressing it says how many SKUs are not counted, and the same line is the status message. It never hides or removes the button.

What stays local, and how do I save for real?

Counts, the order list and the finished state live on the page and reset on reload; nothing is ordered or sent. In your app, save each count from count, write the order list from list, and send the finished sheet from finish.

Is it accessible?

The table has a caption and column headings, each count field is named for its SKU ("Counted, Oat milk, 1 L cartons"), and each Reorder button names the item. The variance is a word with a glyph, never colour alone.

How does it look on a phone?

The Expected and Variance columns fold into the item cell as a second line ("Expected 48, Short 4"), leaving the item, the count field and the Reorder button in a row.

All 100 todo list blocks