shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Add from the row without opening a page with this quick view product card for Vue with Ark UI. Three knitwear tiles sit between shared hairlines inside a framed panel. Each tile has a drawn greyscale picture, the name, a fact and a price, and an outline Button that says "Quick view". It raises a panel over the lower part of its own picture, in place and not in a dialog: three finish swatches, five sizes, a quantity stepper and an Add that names what it adds, as in "Add 2, $168". The total is the unit price times the quantity, in integer cents. Escape or Close folds the panel and returns focus to its button, and a folded panel is inert. The first tile is open on load. On a phone the panel covers the whole picture and the tiles are a row you swipe. Nothing is stored or bought.
FAQ
How do I change the products and the stock?
Edit JUMPERS, FINISHES and SIZES. A jumper has a unit price in cents (8400 is $84) and its drawn shapes. Sold-out combinations are the typed list OUT, keyed jumper|finish|size. The quantity is limited by MAX_QTY.
Why is the quick view not a dialog?
Because it only needs the picture's own space and should not trap the shopper. It is an in-place panel in the tile: closed it is inert and invisible, open it covers the lower part of the picture (all of it on a phone). A storefront that pages through a grid of products in a dialog is a different block.
What does the keyboard do?
Quick view moves focus to the first finish. Tab walks the finishes, sizes, stepper and Add. Escape, while focus is inside the panel, folds it and puts focus back on the Quick view button, as does Close. The button reports aria-expanded.
What stays local, and how do I wire it for real?
The choices and the bag are page state; nothing is stored or charged. Replace add and undo with calls to your cart, and read OUT from your inventory. The pictures are typed shapes: swap Picture for an img of each finish.
