shadcn.io is not affiliated with official shadcn/ui
Product Bundle Builder Storefront Block for Vue
A build-your-own coffee box in four steps (roast, grinder, mug, check): three drawn choices per step in hairline cells, a running total with a 5 and 10 percent discount stair, and Back and Next that block until a choice is made.
Installation
Overview
Let people assemble their own box, with this bundle builder for Vue with Ark UI. A header says what Dipper & Drake sells. A hairline frame with a plus mark on each corner opens with a numbered trail of four steps (Roast, Grinder, Mug, Check), then the current step: three drawn choices in hairline cells, each a native radio so the arrow keys move the choice, with its price and a Chosen word on the one you picked. Under it a band shows the discount stair (one item at full price, two items 5% off, three items 10% off) with the tier you are on marked in solid, and a total that adds up the choices, takes off the percent and shows the box total. The action foot holds a status line, Back, and the block's one Shine Button, Next, which becomes Add the box on the last step. Next stays blocked until the step has a choice and says which one is missing. All four steps share one grid cell, so the panel never changes height. It's built from Button, Shine Button and Guides, with a CSS entrance only. For a gift box, a subscription starter or any shop that sells a set you assemble.
FAQ
How do I change the steps and the choices?
Edit STEPS: each step has a label, an ask, a drawing kind and three choices with an id, a name, a note, a price in cents and a drawing variant v. The trail, the totals and the check view are built from that list.
How is the discount worked out?
From how many steps hold a choice, not from the step you are on. The TIERS list says one item is 0%, two are 5% and three are 10%; the discount is the subtotal times that percent over 100, rounded to a whole cent. A line under the stair says what one more item would take off.
Why can't I press Next?
It can be pressed, but it is marked unavailable until the step has a choice: pressing it then puts "Choose a roast to continue." in the status line and moves nothing. Back keeps every choice you made.
What stays local, and how do I wire it to a real cart?
The choices, the totals and the box count live in the page; nothing is bought. Replace the body of next for the last step with a call that adds the three chosen ids to your cart, and recheck the discount on your server.