shadcn.io is not affiliated with official shadcn/ui
Inventory Alert Storefront Block for Radix UI
A stock watchlist: five records with units in stock, a Tell me at stepper for each, an All, Firing and Quiet filter, a master email switch and a line that says how many alerts would fire now.
Installation
Overview
Let shoppers set their own stock alerts, with this watchlist for React with Radix UI. A header introduces Mudlark, a shop selling vinyl records, with one master Switch for email alerts. In a hairline frame with a plus mark on each corner, the first band is a Segment Group that filters the list to All, Firing or Quiet, each with its count. Five watched records follow, each with its format, the units in stock (typed) and a Tell me at stepper that sets a level from 0 to 20. The rule is stated and applied in words: an alert fires when the units in stock are at or under the level, and each row says Alert fires or Waiting, so pressing the stepper changes the row, the counts and the line in the foot ("Two alerts would fire now") at once. The list is held to five rows, with an empty state when a filter matches nothing. It's built from Switch, Segment Group, Button, Badge, Empty and Guides, with a CSS entrance only. For a collector's shop, a drop calendar or any catalogue with limited stock.
FAQ
How do I fill it with my own products?
Edit RECORDS: each has an id, a title, an artist, a format, the units in stock and the starting level. The rows, the counts and the sentence in the foot are all worked out from those, so nothing is typed twice. Replace the typed units with a live stock feed on your server.
When does an alert fire?
When the units in stock are at or under the level you set. A level of 0 fires only when a record is sold out. The check runs on every press, in the page, and the foot counts the rows that would fire; the master switch only changes the second sentence, from "Nothing is sent in this demo" to "Email is off, so none would be sent".
What is sent?
Nothing. The levels live in the page. To make it real, save the levels per shopper on your server, compare them with the stock whenever it changes, and send the email from there.
Does the list jump when I filter?
No. The list sits in a box as tall as five rows, so filtering to two rows leaves blank space below them instead of pulling the foot up, and a filter with no rows shows the empty state in the same box.