shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Explain a suggestion instead of just showing it with this recommendation product card for React with Ark UI. A hairline frame with a plus mark on each corner holds three picks between shared hairlines. Each tile has the drawn piece, its name, a fact and a reason such as "Because you viewed the Moss throw". A ghost "Why this?" button opens a Popover with the pick's two signals as Checkboxes, each with a three-dot weight. Turn a signal off and the reason is rewritten from the strongest signal left, "Popular this month" takes over when none is, and the tiles reorder by the signals still on. A pair of thumbs Toggles says "Good pick" or "Not for me" and the status line says it is noted here only. Add to bag is an outline Button that turns into "Added" with an Undo. The picks are typed and no model runs. Nothing is stored or bought. Guides rule the bands. On a phone the tiles are a snap row. For stores that want recommendations people can understand and correct.
FAQ
How do I change the picks and their signals?
Edit PICKS. Each pick has the usual product fields and a list of signals, each with an id, the text of its checkbox, the reason it gives and a weight from 1 to 3. A pick's score is the sum of the weights still on, and orderOf sorts by it, keeping the shop's order for ties.
Why do the tiles move when I turn a signal off?
That is the point of the control: the order is a result of the signals, so changing a signal changes the order, and the status line says which pick is now first. Nothing else moves, and each tile keeps its size.
Is this a real recommendation?
No. The picks and weights are typed, no model runs and there is no percentage match. The thumbs are noted in this demo only and change nothing.
What stays local, and how do I wire it for real?
The signals, the thumbs and the bag are page state; nothing is stored, charged or sent. Replace tick and vote with calls that save the shopper's preference, and have your recommender return the signals behind each pick so the popover can show them. The pictures are typed shapes: swap Picture for an img.
How does it look on a phone?
The tiles form a snap row inside their band with the next tile peeking, and the popover opens under its button. Every tile keeps a two-line reason slot, so a longer or shorter reason never changes the row's height.
Is it accessible?
The popover is a dialog opened by a named button and closed with Escape. Each checkbox is named by its words and the dots are decorative, with "Counts 3 of 3" written out. The thumbs are named toggle buttons that report their pressed state, and every change is announced by the polite status line.
