shadcn.io is not affiliated with official shadcn/ui
Product Q&A Storefront Block for Radix UI
A product questions panel for an espresso machine: an ask field that lists similar questions as you type, seller answers sorted first, and a Helpful toggle on each answer.
Installation
Overview
Answer the question before it is asked, with this product Q&A panel for React with Radix UI. A header names the Dulcet 2 from Alder Fen and holds a Native Select to sort by Seller answers first, Most helpful or Newest. A hairline frame with a plus mark on each corner starts with an ask field. As you type, up to three questions that share words with yours are listed under it, in three lines kept free so the panel never moves, which lets a shopper find a duplicate before posting. Post question, the Shine Button, checks the question is a full sentence and adds it at the top of the list as Awaiting an answer, in the page only. Under it five questions each open to their answer (the shop's carry a Seller badge) with a Toggle to mark an answer Helpful and a count that follows it. It's built from Input, Native Select, Collapsible, Toggle, Badge, Guides and Shine Button, with a CSS entrance only. For a product page, a help centre or any listing where buyers ask first.
FAQ
How do I fill it with my questions?
Edit QUESTIONS. Each has an id, the question text, the answer, who answered (by), whether the shop did (seller), the ISO day it was asked and the starting helpful count. The sort order and the counts are worked out from those.
How are similar questions found?
The words of four letters or more in what you type are compared with the words in each question, ignoring a few common ones, and the questions that share the most come first, up to three. It is a plain word match, not a search service. For a large catalog, replace similarOf with a call to your search and keep the three fixed lines.
What stays local, and how do I wire it to real posting?
A posted question lives in the page until you reload, and the Helpful marks are not saved. Nothing is sent to the shop. Replace the submit handler with a call to your questions service and the mark handler with one that records the vote.
Does the list jump when I sort?
No. All five questions stay in the list and only their order changes, and the row for your own question is always there, as a quiet placeholder until you post.