shadcn.io is not affiliated with official shadcn/ui
Question and Answer Reviews Block for Ark UI
Questions about a pressure cooker answered by people who own one: a search box and an All, Answered or Unanswered group, answers with the seller's pinned first, a Helpful toggle on each, an inline answer form and an Ask a question dialog.
Installation
Overview
A product questions-and-answers section for React with Ark UI, for the Stovestead Pressure Cooker, a fictional 6-litre pot. At the start, a search box and an All, Answered and Unanswered group (each with its count) sit over four questions as ruled rows. Each question shows who asked and when, and its answers: the seller's answer is pinned first with a Seller badge, and owners carry a tag such as "Owned 8 months". Every answer has a Helpful toggle that counts once and can be taken back, and every question has an "Answer this question" collapsible with a real form. At the end, behind a divider, the Shine Button "Ask a question" opens a dialog with a form. Your question and your answers land on this page, marked as yours, and a polite line says nothing was sent. What shows is counted live ("Showing 2 of 4 questions: answered"), and an unseen copy of the full list holds the height so filtering never moves the page. It uses Input, ToggleGroup, Toggle, Collapsible, Dialog, Textarea, Badge and Shine Button. On a phone the panel is just the button, under the header.
FAQ
Where do my question and answers go?
Nowhere: they're state in the page. Ask a question and it appears at the top of the list, marked as asked "just now" by you, with "No answers yet"; post an answer and it joins the end of that question's answers with "Just now". A polite line says nothing was sent and a reload starts afresh. To store them, post the text from the submit handlers and add what your server returns to the lists. An answer shorter than three characters, or a question under ten, shows an error under the box and puts focus back in it.
How are the answers ordered?
The seller's answer comes first, then the most helpful, then the oldest; pinned holds the rule. Your own answers always land after the typed ones, so a new answer never jumps above the seller's. The Helpful counts you add move a number and never a row.
What do the search box and the group filter?
Both narrow the questions, together: the search looks in each question's text and in all its answers, and the group keeps all, answered or unanswered ones. Each button shows its count of the whole list. The line under them says what shows and is read out politely, and an empty state with a button brings every question back. An unseen copy of the full list shares the cell, so the height never changes while you type.
How does the Ask a question dialog work?
The Shine Button opens a dialog with a labelled text box. Posting checks the length, adds the question to the list, says so, and turns the dialog into a short thanks with a Close button; the form remounts each time it opens, so a second visit starts empty. Focus returns to the button when it closes.
The trigger takes asChild, so it can be your own link or button.