shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Point a feature list at the product with this features product card for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a drawn greyscale stand mixer with four numbered markers and, in a side cell with its own divider, the product's name, read-only Rating stars and a numbered list of features: "1 Planetary action", "2 Tilt-back head", "3 Five-litre bowl" and "4 Ten speeds". The rows are a vertical Toggle Group: pressing one rings its marker on the picture and opens one line of detail under the list, one at a time, in a space that keeps its height. Stock is one line of words with a dot and the ship date. The single Shine Button says "Add to bag" with the price and turns into "Added" with an Undo; the heading row's "Bag" count follows and a polite status line says what changed. Nothing is stored or bought. Guides rule the bands. For product pages and cards where each feature has a place on the product.
FAQ
How do I place the markers?
Each feature in FEATURES has an x and a y, written as percents of the picture's width and height, for example 46% and 62%. The markers are decorative, so the list is the control: it is the part a keyboard or screen reader user reaches. Move a marker by editing those two values.
How does the feature list work?
It is a vertical toggle group: arrow keys move between rows and Space or Enter presses one. Pressing the open row closes it, so nothing is open and the line says "Press a feature to read about it." The detail line reserves four lines of height, so opening and closing never moves the Add button.
What stays local, and how do I wire it for real?
The open feature and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart and keep the status line for the result. The ship date is typed (SHIPS); compute it from your stock system. The picture is typed shapes: swap the figure for an img and keep the markers over it.
How is stock shown?
As words with a small dot, never a color: "In stock, ships Mon 12 Oct". For low or sold-out stock change the words ("Low: 3 left", "Back about 18 Nov") and keep the same line so the layout doesn't move.
How does it look on a phone?
The picture comes first with its markers, then the feature list and the Add button stacked under it. The side cell's divider becomes a rule across the top of the stacked cell.
Is it accessible?
The picture is a named image, the list is a named group whose rows say which is pressed, and the detail line is linked to it as its description. The markers carry no information the list doesn't, and the stars are hidden because the text beside them gives the average and the count. Pressing Add is announced by the polite status line.
