shadcn.io is not affiliated with official shadcn/ui
No Bug Reports Empty State Block for Vue
A QA tracker's page with zero open reports: a report form (a title, a severity and the steps), an empty glass jar whose dashed beetle turns solid, four severity counters and a small table that grows with each report.
Installation
Overview
Turn "zero open" into the start of a report, with this no bug reports empty state for Vue with Ark UI. The page is Weevilry, a QA tracker: the rails of the page and one band across it are split in two. At the start the heading, one sentence and a short form, a Field for the title, a Toggle Group for the severity (Critical, High, Medium or Low) and a Textarea for the steps to reproduce, then the Shine Button, the only colored control, Submit report. At the end an empty glass jar stands where a product's mark would, with a beetle that is only dashed while nothing is reported, over four counters (Critical, High, Medium and Low, all 0) and a small table. Submitting adds a row, raises the counter for its severity and fills the jar with a solid beetle. The frame is ruled by Guides, the jar is one SVG whose classes change, and everything moves with CSS only. For the empty state of any issue tracker, QA board or bug inbox.
FAQ
What stays in the page, and how do I make it real?
The reports live in the page's state: a reload empties them, and Start over empties them without one. Nothing is sent, and the status line says so ("Nothing was sent."). To wire it for real, post the title, severity and steps to your tracker where the code says so, add the row from the response, and compute the four counters from your own list.
What does the form check?
Only the title is required. An empty one says "Give the report a title." in a line under the field and keeps focus there, and the field's hint reads "Up to 60 characters." once it has text. The severity is a group that always keeps one choice (Medium to start) and the steps are optional, up to 200 characters. After a report is added the form is empty again and focus goes back to the title for the next one.
What does the jar do?
It is hidden from assistive technology; the counters and the table say the same in text. The beetle in it is dashed while there are no reports and turns solid with the first, and a second and a third small beetle join it as reports three, so the jar fills as the table does. The demo lists three reports; the fourth press says so and moves focus to Start over.
How are the counters and the table made?
Each counter is the number of reports with that severity, counted from the same list the table shows, so they can never disagree. The table is a native one with a caption, column headers and the report's title as the row header; the filed date is a typed day shown in a time element and drops out on a phone.