shadcn.io is not affiliated with official shadcn/ui
Inventory Updated Success Block for React
A confirmation panel for a stock count: tabs for three locations, each a table of SKUs with the count before, the signed change and the count after and the word Low under the reorder point, equal in height, and four sales channels that each say Synced.
Installation
Overview
Show what a stock count changed, place by place, with this confirmation panel for React with Base UI. It is the panel Shelfstack, inventory software, shows once a count has been applied: a header with one action, the Shine Button that opens the audit log, over one framed card in three bands. The first is Tabs for three locations and, under them, a native Table for the one you pick: each SKU's count before, the change with its sign and the count after, and the word Low on a row whose count fell below its reorder point. The second is four sales channels that each say Synced. The third is the live line. For stock, assets, seats and any count that moves in several places.
FAQ
What stays in the page, and how do I wire it for real?
No stock was changed: the fifteen adjustments and the sync times are typed sample data. To wire it, fill PLACES from your count, with each SKU's count before, the change and its reorder point, and CHANNELS from your integrations; the count after, the Low marks, the totals and the sentences are worked out from those.
Why does the panel not move when I change tabs?
The three tables have different numbers of rows (six, five and four), so each one also sits unseen in the same grid cell as the live panel: the tallest sets the height. The copies are hidden from assistive technology and the keyboard, and every row has one fixed height, so the tables line up whichever tab is open.
When does a row say Low?
When the count after the change is below that SKU's reorder point: 11 against 12, for example, or 12 against 15. It is a word with an icon, not a colour, and it says how low the line sits (Reorder at 12). On a phone the same words sit under the SKU, since the Stock column is hidden there.
How are the changes written?
With their sign: a plus for stock added and a minus for stock taken. The sign is drawn for the eye and written out in words for a screen reader (Minus 12), and the figures are plain digits in a left-to-right span so a right-to-left page keeps them in order.
Related
- Pro
Sync Completed Success
Integrations and syncsA confirmation panel for a finished data sync: a table of records created, updated and skipped for four objects with a segmented bar under each name, a switch for a 15-minute schedule with the next run time, and a Sync now button that adds a second run.
- Pro
Bulk Update Success
Saves and updatesA confirmation panel for a bulk edit: a drawn contacts list whose twelve owner cells were just reassigned, with an undo bar docked at the foot of the stage whose Undo restores every cell, then offers Redo, and a button that applies the edit again.
- Pro
Storage Optimized Success
Servers and storageA confirmation panel for a compaction: three cells on shared hairlines, one table each, with the size before as a hollow bar, the size after solid and the reclaimed part hatched, worked out from typed sizes, and a toggle group that sorts the tables.
- Pro
Data Import Success
Backups and exportsA confirmation panel for a finished CSV import: one bar split into imported, duplicate and failed rows by their counts, a scrolling ledger of the failed rows with the problem and what the file had, and a real CSV error report built from the typed rows.
- Pro
Storage Quota Expanded Success
Plans and limitsA confirmation panel for a raised storage limit: a capacity ruler from 0 to 2 TB with the space used, the old limit and the space added, three figures worked out from the same numbers and a forecast of when the free space runs out at a growth rate you pick.
- Pro
Asset Uploaded Success
Saves and updatesA confirmation panel for an uploaded picture: a greyscale drawing in a frame beside a table of the original and its three smaller copies, with sizes, how much smaller each is worked out from the byte counts and a button that copies each URL.