shadcn.io is not affiliated with official shadcn/ui
Product Recommendation Chat Block for Radix UI
A lamp shop assistant's thread whose recommendations are a sideways snap row of drawn lamp cards with a finish select and Add to bag, a Bag popover with quantity steppers and a derived total, and budget chips that ask for a new row.
Installation
Overview
Show a recommendation as a conversation, with this product recommendation chat for React with Radix UI. A hairline frame holds a window of fixed height for Lampwick, a lamp shop: the assistant, Ingrith Vowles, answers with a sideways snap row of lamp cards in the log, each with a drawn lamp, a name, a price, a rating, a finish Native Select (Brass or Black) and an Add to bag button. The Bag button in the top bar opens a Popover of the lines with a quantity stepper, Remove and a derived total, and budget chips under the log ask for a new row of cards. There is no checkout. The composer's Shine Button is the only colored control.
FAQ
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file, picked by words in your message or by the chips, then one fallback per message and a last line that says it was the last sample reply. The bag and the finishes live in state. Nothing is sent, nothing is charged and no model runs. To wire it for real, replace LAMPS and SETS with your catalog and send the bag from addLamp to your cart.
How does the bag work?
Adding a lamp in a finish stacks it with the same lamp and finish, up to five, or starts a new line. The popover shows each line with a stepper and Remove, and the count in the button and the total are derived from the lines, so they cannot disagree. Each change is announced in the status line under the composer.
How does the row of cards behave?
It is a focusable region that scrolls sideways with the arrow keys or a swipe and snaps to a card. The finish you choose on a card is kept per lamp, so the same lamp in a later row shows the same finish.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. The field grows with its content up to a limit. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden name and time. The cards are a list with a hidden name on every button, the rating is words as well as a star glyph, and Escape closes the bag. The avatars are hidden from assistive technology because the name is always in text.