shadcn.io is not affiliated with official shadcn/ui
Product Details Storefront Block for Ark UI
A whole product page for one waxed jacket: three drawn views, a colour group, a size group that must be chosen, stock and SKU for the exact choice, a single-open accordion, three similar pieces and a pinned phone foot with the price and Add.
Installation
Overview
Put a whole product page on one panel with this product details block for React with Ark UI. A header introduces the Drover waxed jacket from Merlin & Moss. In a hairline frame with a plus mark on each corner, the first band holds a drawn jacket in three views (front, back and a close crop of the collar and zip) with three thumbnails at the start; in the side cell are the name with a Save toggle, a read-only Rating, the price, a colour ToggleGroup (Stone, Slate and Ink redraw the jacket), a size group whose sold-out sizes are struck and named, the stock and SKU of the exact colour and size, the Shine Button and a single-open Accordion for Details, Materials, Delivery and Returns. A band of three similar pieces closes the panel, and on a phone the foot is pinned with the price and the same Add action. Adding without a size says Choose a size and moves focus to the sizes; a good Add raises the bag count. It is for a product page, a drop page or a catalog template.
FAQ
How do I use my own product?
Edit COLOURS (a name, a three-letter SKU code, a grey step and the units in stock for each size in SIZES), PRICE in cents, SECTIONS for the accordion and SIMILAR for the band under it. The stock text, the SKU and which sizes are struck out are all derived from those units, so nothing is typed twice. Replace the drawing with an img when you have photographs.
What happens if I add without choosing a size?
Nothing is added. The line under the sizes turns into an alert with an icon, the status line says Choose a size first, and focus moves to the first size you can pick. Changing the colour to one where your chosen size is sold out clears the size and says so, instead of keeping a combination that cannot be bought.
What stays local in the demo?
The bag count, the saved heart and the stock live in the page, and nothing is bought, saved or sent. To wire it for real, send the colour, the size and the SKU from add to your cart, read the units from your inventory instead of the typed array, and keep the status line so people are told what happened.
Does the accordion jump when it opens?
No. Every answer reserves the same height, so opening one row closes another without moving the Add button or the similar pieces below. Enter and Space open a row. The arrow keys also move between the four rows.
How does it look on a phone?
The picture comes first with its thumbnails under it, then the buying options, the accordion and the similar pieces. The panel foot is pinned to the bottom of the screen with the price and the Add button, and the Add inside the side cell is hidden there, so there is always exactly one.
Is it accessible?
The thumbnails, the colours and the sizes are named groups. A sold-out size is disabled and read as sold out, never shown by colour alone. The prices are marked left-to-right inside right-to-left text, the stars are decorative and the score is written as text, and the status line is a polite live region present from the start.