shadcn.io is not affiliated with official shadcn/ui
Gift Finder Chat Block for Ark UI
A gift shop adviser's narrow thread with a budget slider and occasion chips that filter a sideways row of drawn gift cards live, a Save heart on each, and a Share wishlist button that posts the saved total.
Installation
Overview
Show a gift chosen in conversation, with this gift finder chat for React with Ark UI. A narrow hairline frame holds a window of fixed height for Presentford, a gift shop: the adviser, Sunniva Grayling, posts a card whose Slider sets a budget and whose Toggle Group picks an occasion. The ideas below are a sideways snap row of drawn gift cards that narrows live, with an Empty state at the same height when nothing fits. Each card has a Save heart, and Share wishlist posts the saved gifts as a list card with the count and the total derived. 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, then one fallback per message and a last line that says it was the last sample reply. The saves, the filter and the shared list live in state. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, replace GIFTS with your catalog and send the saved ids from share to your wishlist service.
How does the filter work?
A pure helper keeps the gifts priced at or under the budget that also belong to the chosen occasion. The row, the count line and the empty state all read its result, and the row's height is fixed so nothing moves when it empties.
How is the wishlist total worked out?
From the saved ids at the moment you press Share wishlist: the list card counts them and adds their prices, so it can never disagree with the hearts. Nothing is ordered.
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 slider speaks "Up to $60", the chips are a labelled group, and the row is a focusable region you can scroll with the arrow keys. The avatars are hidden from assistive technology because the name is always in text.