shadcn.io is not affiliated with official shadcn/ui
Product Set Storefront Block for Solid
A four-piece living-room set with a checklist and a drawn room: the 15 percent set price applies only with all four ticked, an unticked piece is drawn as a dashed outline, and a line says what to add and what it would save.
Installation
Overview
Sell furniture as a set that only works whole, with this product set for Solid with Ark UI. A header says what Ashgrove & Moss offers: 15% off when you keep all four pieces. A hairline frame with a plus mark on each corner puts a checklist of the sofa, armchair, side table and floor lamp at the start, each a native checkbox with its note and price, and a drawn room in a side cell at the end. A ticked piece is drawn solid in the room and an unticked one as a dashed outline. Under the checklist a figures list shows the pieces together, the set saving and the total in whole cents: at all four the sum is struck and the line reads Set price, and with any piece out the total is the plain sum and a line names what to add and what it would save. The foot holds a status line, the bag count and the block's one Shine Button, which adds whatever is ticked. It's built from Badge, Shine Button and Guides, with a CSS entrance only. For a furniture shop, a room set, a kit or a starter pack.
FAQ
How do I fill it with my own set?
Edit PIECES and SET_PCT. A piece has an id, a name, a note, a price in cents, a short name for the nudge line and its shapes, the paths of its drawing in a 204 by 140 box. The set price, the saving and the nudge are worked out from them.
What is the rule, exactly?
The set price applies only when every piece is ticked: the sum times (100 minus the percent) over 100, rounded to the cent. With any piece unticked each piece is at its own price and nothing is taken off. The line beside the room names the missing pieces and the saving you would get by adding them.
What stays local, and how do I wire it to a real cart?
The ticks and the bag count live in the page; nothing is bought. In add, send the ticked piece ids to your cart and apply the set price on your server only when all four are there.
Can I use photographs?
Yes. The room is a drawing so the example needs no images; replace Room with a composite image per tick state, or one image per piece laid in the same box, and keep the dashed outline idea for pieces that are out.
How does it look on a phone?
The checklist comes first and the room stacks under it with its own top rule; the foot is pinned to the bottom of the screen with the Add button in reach.
Is it accessible?
Each piece is a real checkbox inside a label that includes its name and price, with a visible focus ring on the drawn box. The state is never colour alone: the room's dashed outlines have the words "Dashed pieces are not in your set" beside them, and the set price is a word. The status line is a polite live region.