React Feedback Capture

When a thumb isn't enough, this is the fuller feedback surface — but built around the same tension: every extra field lowers the response rate. So it asks for the rating first, reveals reason chips only once a rating is given, and keeps the comment optional.

EQ-07’s pressure excursion is consistent with turbo pump bearing wear — pump current is up 18% with vibration above its warning band. I’d schedule a PM before the next campaign.

How was this response?

Installation

npx shadcn@latest add "https://kelvinui.com/registry/feedback-capture.json"

Props

PropTypeDescription
promptstringThe question above the controls
upReasonsstring[]Reason chips for a positive rating
downReasonsstring[]Reason chips for a negative rating
onSubmit(result) => void{ rating, reasons, comment }

Progressive, so it gets answered

Feedback UI lives on a knife-edge: ask for too much and people don't answer, ask for too little and the data is useless. The resolution is to reveal progressively — the rating is one tap, and only after it is given do the reason chips appear, tailored to whether the rating was up or down. A user who just wants to say "good" and move on can; a user who wants to explain gets structured options plus an optional comment.

Structured reasons are the trainable part

Free text alone is a graveyard — nobody reads ten thousand comments, and a model can't learn from an uncategorised pile. The reason chips (Inaccurate, Missing sources, Unsafe, Too verbose) turn a vague thumbs-down into a labelled datapoint you can count, chart, and route: a spike in "Missing sources" points at retrieval, a spike in "Too verbose" points at the prompt. The comment is there for the nuance the chips miss, but the chips are what make the feedback aggregate — pair the counts with the Eval Scorecard to close the loop from user signal to measured regression.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.