shadcn.io is not affiliated with official shadcn/ui
Bug Report Completeness Success Block for React
A bug-report confirmation inside an app panel: the issue number with a copy button, a triage badge, a five-item completeness list with a progress bar, and an Add button that opens a textarea and ticks the missing item locally.
Installation
Overview
Show a reporter what their report is missing and let them fix it on the spot, with this confirmation panel for React with Base UI. It is the panel Gnatcatch, an issue tracker, shows after someone files a bug: a header with one action, the Shine Button Track this issue, over one framed card ruled by Guides. Its first band names the report with the issue number, a Copy Button, the title and an outline Badge for triage. The second is a Progress bar and a list of five parts, Steps to reproduce, Console log, Screenshot, App version and Minimal repro, with the missing one marked and an Add button. A status line follows, and the last band is a Collapsible with a Textarea: Save ticks the item and moves "4 of 5" to "5 of 5". For trackers, support forms and anything that triages reports.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was filed. The issue, its title and the five parts are typed constants; Save only ticks the item in the page. To wire it, build the list from the stored report, send the added text to an endpoint that attaches it to the issue, and compute the count and the bar from what the record holds.
Where do the count and the bar come from?
From the list. "4 of 5" and the bar's width are both worked out from how many parts are included, so ticking the last one moves them together. Nothing is typed twice.
Where does the editor open, and does it move things?
In the last band, under the status line, so opening it moves nothing above it. The section is inert while closed. Add opens it and moves focus to the textarea; saving or cancelling closes it and puts focus back on the Add button, or on the new "Included" mark once the item is in.
Is a missing part only a colour?
No. Each part is a check and the word "Included", or a bar and the word "Missing", in the same weight in light and dark. On a phone the word "Missing" is hidden visually but the button is named "Add minimal repro".
Related
- Pro
A confirmation after sending a feature request: the request with a four-word pipeline from Triage to Shipped, and four similar requests, each with a status and a Vote toggle that counts once and can be taken back.
- Pro
A split confirmation for a sent support ticket: a stub with a copyable ticket number, subject, category, priority and time, a bar with three response-time marks worked out from the sent minute, and three articles to read meanwhile.
- Pro
A confirmation that a help-desk ticket is resolved: the ticket and its status, the agent's closing message in a bubble, a five-star rating you can press or move with the arrow keys, and a Reopen ticket button that flips the status.
- Pro
Star Rating Feedback Contact
Support and feedbackA product feedback form for a roadmap tool in a card in card: five named stars with a word that follows the choice, switch-on topic chips and a message, ending in a confirmation that lists what was chosen.
- Pro
Report Content Dialog
Feedback and reportsA community post with a two-step report dialog shown open: five reasons with a line each, then details and a mute switch, then a pane that says what happens next with a reference and an Undo.
- Pro
Pull Request Merged Success
Builds and deploysA confirmation panel for a merged pull request: a commit graph drawn in SVG beside the same history as a list, a group of buttons that dims one lane, the twelve checks as one count, the deploy in three timed steps and the merge hash with a copy button.