shadcn.io is not affiliated with official shadcn/ui
User Feedback Sentiment Monitoring Block for React
Fourteen days of feedback as diverging columns with a release pin and a three-day negative share line, a day picker, topic chips with counts and three typed quotes for the chosen day.
Installation
Overview
Find the day sentiment dipped and read the words behind it with this feedback panel for React with Base UI. It is Moodlark, a product feedback tracker (made up), drawing 14 days of feedback: positive items rise from a centre axis, negative ones hang below it and neutral ones are a dot on the axis. A dashed line carries the negative share averaged over three days, and a pin marks the day version 4.2 was released. The days are a group of radio buttons, so the arrow keys move between them; the chosen day lists its feedback by topic (Speed, Editor, Billing) as chips with counts and shows three quotes with the initials of who wrote them. The header sentence is worked out from the counts ("Negative share doubled the day after v4.2"). On a phone the plot scrolls with the newest days in view. Guides draw the frame and its bands; the entrance is CSS only. For product teams, release reviews and support leads.
FAQ
How do I use my own feedback?
Edit LINES: one line per day, oldest first, with the positive, neutral and negative counts, the counts by topic, and the negative counts by topic. RELEASE_DAY places the pin, TOPIC_NAMES names the topics and QUOTE_SETS holds the quotes, each set shown from its first day until the next set starts.
Are the quotes real?
No. They are typed examples with invented initials, picked to match the period; the panel says so in its status line. In your app show quotes from your feedback tool for the chosen day and keep the counts derived.
How do I pick a day with a keyboard?
The columns are radio buttons in one group: Tab enters it, arrow keys move between days and the chosen day changes at once. A polite status line reads the day, its counts and its negative share.