shadcn.io is not affiliated with official shadcn/ui
Bulk Order Storefront Block for React Aria
A size by colour order matrix for aprons: a number field per cell, units per row, a unit price that steps down at 24 and 48 units across the whole order, a bar of price breaks and a 12-unit minimum.
Installation
Overview
Take a wholesale order in one grid, with this matrix for React with React Aria. A header says what Tansy & Twig, a maker of aprons and workwear, sells. The framed panel is a list of four colours (named greys) by six sizes, a Number Input in each cell and the units for each row at its end; on a phone each colour becomes a card with its sizes three to a line. Under it three tier cells show the price breaks, a bar marks 12, 24 and 48 units and a line says how many more units earn the next price. Four figures give units, price each, what you save and the total. The foot holds the block's one Shine Button. For a wholesale page, a team order or a workwear shop.
FAQ
How is the price worked out?
The unit price follows the whole order, not a cell: 12 to 23 units is $19.50 each, 24 to 47 is $17.70 and 48 and up is $15.90. Everything is in whole cents, and "You save" is measured against the 12-unit price. Edit TIERS for your own breaks.
What happens under the minimum?
The button stays quiet and unavailable, and pressing it says "The minimum order is 12 units; you have 7." The status line counts the units still needed. No tier is marked until the order reaches 12.
How do the number fields behave?
Each takes 0 to 99 and is named by its colour and size ("Bone, size M, units"). On React Aria a typed value is applied when you leave the field or press Enter, so type, then Tab.
What stays in the page, and how do I connect it?
Everything. Add only notes the order in the status line; nothing is ordered, stocked or charged. To make it real, post the grid of units to your cart and check stock for each colour and size in the response.