shadcn.io is not affiliated with official shadcn/ui
Inventory Restock Calendar Block for Radix UI
Six products with stock, a daily sales rate and a delivery date, the run-out date and the gap before the delivery worked out, a depletion line, Expedite and a month of dates.
Installation
Overview
Tell a shop whether stock will last until the next delivery with this inventory restock calendar for React with Radix UI. A hairline frame with a plus mark on each corner lists six products, each with its stock, a typed daily sales rate and a booked delivery date. From a fixed 14 October 2026 the run-out date is worked out, and a sentence names the gap: "Runs out 7 days before the delivery on Wed 28 Oct", or "Stock lasts 2 days past the delivery". A small line falls from the stock to zero on the run-out day and meets a tick on the delivery day, so the gap is also a shape. An outline Button brings a delivery forward two days, never earlier than tomorrow, and the dates, the sentence and the line re-derive. A NativeSelect sorts by gap, run-out date or name, and a drawn month marks every run-out and delivery. The bands are ruled by Guides. It's built from Button, NativeSelect, Field and Guides, with a CSS entrance only. For inventory tools, shop back offices and any app that plans a restock.
FAQ
How do I use my own products?
Edit PRODUCTS: each has a name, whole units in stock, units sold a day in rate and an ISO delivery date. The run-out date is today plus the stock divided by the rate, rounded down, and every sentence, line and mark comes from that.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and every day count, bucket and ring comes from it, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server and keep the rest as it is.
What does Expedite do?
It moves the booked delivery two days earlier in the page, but never before tomorrow; at that point the button says why it cannot go further. Reset deliveries puts them all back. Nothing is ordered or sent to a supplier.
How should I read the gap?
A positive gap means the shelf is empty for that many days before the delivery. Zero means it empties the day the delivery arrives, and otherwise the stock lasts past it. The warning glyph and a heavier weight mark a gap; there is no color.
What does the month beside the list do?
It is a drawn month, not a picker. Each date in the list is marked on it with a shape from the legend, and the marks move when the list changes. Previous and next step through the months the data covers. It is hidden from screen readers; a sentence under it says how many dates are marked, and the list holds every fact.