shadcn.io is not affiliated with official shadcn/ui
Featured Product Storefront Block for React Aria
A product of the week for a cast-iron foundry: the maker's note, a stock bar and a Last 18 made line from typed units, size and colour groups that rescale and recolour the drawn Dutch oven, a quantity held to the stock and a total in integer cents.
Installation
Overview
Spotlight one product a week with this featured product block for React with React Aria. A header introduces the Coppice Dutch Oven from Coppice & Co. In a hairline frame with a plus mark on each corner, the maker's note leads at the start: a quote and a signature line, a Progress bar with a line from typed units (Last 18 made), a size ToggleGroup and a colour group, a quantity stepper that cannot pass the units left, the total and the Shine Button. At the end, the oven is drawn large; the size scales it and the colour recolours it. Add runs one short pending state of 800 milliseconds, then says it added in this demo and raises the bag count. Save is a pressed toggle. It suits a product of the week, a drop page or a limited run.
FAQ
How do I change the product and its run?
Edit EDITION (the size of the run), SIZES (a label, a price in cents, the units left and how much of the drawing it fills) and COLOURS. The stock line, the bar and the clamp on the quantity are all derived from those units. The maker's note and signature are plain text in the component.
How is the quantity limited?
The stepper's buttons answer instead of disappearing: at the limit they stay in the tab order, keep their name and say why in the status line, such as Only 9 left in 7.25 qt. Changing to a size with fewer left lowers the quantity to fit. The total is the price in cents times the quantity, formatted once.
What stays local in the demo?
Add waits 800 milliseconds and then raises the bag count in the page; the stock does not go down, nothing is saved and no order is made. To wire it, replace the timer with your cart request, keep the busy state on the button, and send the size, the colour and the quantity.
Is the Last 18 made line real?
It is read from the typed units, never invented, and the bar shows how much of the run has gone. If you connect it to real inventory, keep it honest: show the figure only while it is true.
How does it look on a phone?
The drawn oven comes first, then the note, the stock, the two groups, the quantity with its total and the full-width button. The status line and the bag count are at the foot.
Is it accessible?
The groups are named, the quote is a block quote with its signature, the bar is hidden from screen readers because the stock line says the same in words, the quantity buttons are named for what they change, and the status line is a polite live region. After the pending state, focus returns to the Add button.