shadcn.io is not affiliated with official shadcn/ui
Feedback Sorter Kanban Block for React
Four lanes (Praise, Bug, Idea, Question) of twelve customer comments where moving a comment re-tags it and every count and share re-derives.
Installation
Overview
Sort customer comments by hand with this feedback board for React with Base UI. A hairline frame with a plus mark on each corner holds four lanes that share their lines (Praise, Bug, Idea and Question) and twelve short comments, each placed by an automatic tagger. The tag on a card is its lane: move a comment to another lane and it is re-tagged, the Badge changes to the new word and glyph, and the card says which tag the tagger gave it ("Was Idea"). Every count re-derives. Each lane head shows its cards and its share of all comments, and the sentence under the heading names the biggest lane and how many comments were re-tagged by hand. A comment moves by dragging its grip, by keyboard, or from its Dropdown Menu under "Move to". A polite status line in the foot reports each change, and Reset restores the tagger's sort. The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region with the next lane showing. For product teams, support leads and any app that triages what people write.
FAQ
How do I fill it with my own comments?
Edit COLUMNS and START. A comment has an id, a title holding the text (clamped to three lines on the card), a source, the lane it sits in now as column, and auto, the lane the tagger chose. Make the two equal to start. The shares divide by the length of START.
What does re-tagging do?
The lane is the tag, so moving a comment is re-tagging it: the card's badge and glyph follow the lane, and retaggedIn counts the comments whose lane no longer matches auto. The status line says where the comment went and the new total. In your app, send the new tag from put, and keep the tagger's guess so you can measure it.
How are the shares worked out?
Each lane's count divided by all comments, rounded, shown in the lane head and read out in the status line. The numbers always add to the same total because nothing is added or removed, only moved; the shares can differ from 100 by a point or two through rounding.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line, for example "Dark mode finally matches my editor, Praise, position 3 of 4".
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column and the current one ticked. It goes through the same move as the grip and the keys, so no route gets around it. Choosing one moves the card, puts focus on it in its new place and says so in the status line.
What stays in the demo, and how do I save the changes?
Everything: the cards live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, call your API from put, the one function every finished move goes through (the menu, a drop and the block's own buttons), and update the cards from the response. The product and the comments are made up.
How does it work on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card. The status line is still read out to screen readers.