shadcn.io is not affiliated with official shadcn/ui
No Feedback Empty State Block for Vue
A feedback widget's popover shown open in place on a drawn settings page: five drawn faces from flat to curved as radio buttons, bars that are all zero, a follow-up field and a Send feedback button that grows one bar.
Installation
Overview
Show a feedback widget that has not heard from anyone as the popover it opens, with this no feedback empty state for Vue with Ark UI. The host is Hearkenly, a feedback widget: its header holds the real Feedback button, and under it a stage draws a settings page, a top bar with a twin of that button and a few rows. Drawn open in place under the button is the Popover card: five faces whose mouths are drawn from flat to curved, Awful, Poor, Okay, Good and Great, each a native radio button with its word and a small bar of how many answers it has, all at 0 on a dashed baseline. Choosing a face turns it solid and enables the follow-up Textarea, worded for that face. The Shine Button, the only colored control, Send feedback, says "Thanks. Kept in this demo." and grows the chosen face's bar by one. Pressing Feedback opens the real non-modal popover with the same content. The frame is ruled by Guides, and everything moves with CSS only. For the feedback button of a product, a help center or a docs page.
FAQ
What stays in the page, and how do I make it real?
The answers stay in the page's state: they only move the bars, the status line says nothing was sent, a reload empties them and Start over empties them without one. The demo keeps five answers. To wire it for real, send the face and the note to your API where the code says so, and draw the bars from the totals your server returns.
What is the in-place card, and what is the real popover?
Shown open in place for the preview, so the block shows its content without a click: on load the card is drawn as a plain non-modal element under the Feedback button on the stage. Pressing the button opens the real Popover, with Escape to close it and focus back on the button, and the in-place copy stays closed until a reload. In your app keep only the Popover and its trigger.
Why are the faces drawn, and how do I pick one?
Each face is a small drawing in the foreground color, a circle, two eyes and a mouth that goes from a deep frown to a wide smile, so there are no emoji whose look changes from one system to the next. Each is a native radio button named by its word, so the arrow keys move between them, Space or the pointer picks one, and a screen reader hears "Great, radio button" and how many answers it has so far.
What does the follow-up field do?
It holds the place from the start so the card never changes height: until a face is chosen it is disabled and says "Choose a face first". Choosing a face enables it and words the label for that face, "What went wrong?" for Awful and "What worked well?" for Great. The note is optional and up to 240 characters.
What does Send feedback do?
Without a face it says "Pick a face first" and moves focus to the faces. With one it counts the answer, clears the form and shows "Thanks. Kept in this demo." in the line under the faces; the chosen face's bar grows by one and its count changes. At five answers the line says the demo is full and Start over clears them.
How does it look on a phone?
The in-place card docks to the foot of the stage so Send feedback is on the first screen and the faces keep five across. The real popover keeps the catalog's own phone layout, a card under the button that never runs past the edge of the screen, and nothing scrolls sideways, even at 320 px wide.