shadcn.io is not affiliated with official shadcn/ui
Product Variants Storefront Block for Vue
A variant picker for a modular sofa: three materials with price adjustments, then a grid of colours by widths whose cells say In stock, Low or Sold out in words, with the price and summary derived in integer cents.
Installation
Overview
Let people choose a combination and see what it costs and whether it is there with this product variants block for Vue with Ark UI. A header introduces Ulva, a maker of modular sofas, where the size is the width of the module. In a hairline frame with a plus mark on each corner, the first band is the material, three rows with their price adjustments. The second is a grid with one row per colour and one cell per width; each cell shows the width, the price for the chosen material and the stock in words (In stock, Low: 2 left, or Sold out in Boucle) beside a glyph for that material. The cells are native radios in one group, so the arrow keys walk them and a sold-out cell cannot be chosen. The last band is a drawn sofa at the chosen width and grey, a line naming the choice, the price and the Shine Button. It suits furniture, shoes, bikes or anything sold in variants.
FAQ
How do I fill it with my own variants?
Edit MATERIALS (a name, a note and a price adjustment in cents), WIDTHS (a width in cm, a base price in cents and the number of seat modules), COLOURS, and STOCK, the units for each material, colour and width in that order. The cell text, the count of sold-out cells and the price are all derived from them.
How is the price worked out?
The width's base price plus the material's adjustment, both in integer cents, formatted once. Nothing is computed from a decimal, and the cell, the summary and the status line read the same number.
What if my choice is sold out in another material?
Changing the material re-reads every cell. If the cell you had chosen is sold out in the new material, the choice is cleared, the summary says no combination is chosen and the status line says why. A sold-out cell is disabled and says Sold out in the material's name, so it is never only dimmed.
What stays local in the demo?
The choice, the stock and the order count live in the page, and nothing is bought. To wire it for real, send the material, colour and width from order to your cart, read the stock from your inventory, and keep the status line.