shadcn.io is not affiliated with official shadcn/ui
Topic Clustering Comments Block for Svelte
Nine feedback comments sorted into Billing, Mobile app and Speed clusters by a keyword map, with renamable clusters, top words, a Move to select on every comment and a Reset to the rules.
Installation
Overview
Sort a pile of feedback into themes and fix the sort by hand, with this clustering board for Svelte with Ark UI. A typed keyword map puts each of nine comments in the cluster whose words it contains most; a comment no word matches waits in Unsorted. Four cells share hairlines. Each cluster has a name you can rename in place with an Editable, its top words with counts, and its comments in a region that keeps its height. Every comment has a Native Select, Move to, that sends it to another cluster; counts and top words follow, focus goes to the comment in its new cell and a polite line says where it went. Reset puts the rules' result back. An Empty state fills a cell with nothing in it. It is built from Editable, Native Select, Empty, Badge, Button and Guides, with a CSS entrance only. For researchers, product managers and anyone turning comments into themes.
FAQ
How are comments assigned, and how do I use a model instead?
RULES is a keyword map: each cluster has a list of words, written as regular expressions with word boundaries. ruleOf(body) counts how many of a cluster's words a comment contains and picks the cluster with the most; a tie goes to the first cluster, and no match means Unsorted. The block says "Sorted by a typed keyword map in this demo, not by a model." To use a model, replace ruleOf with a call that returns a cluster id for a comment, and keep Move to: a person's correction should win over the model on the next run.
How do I use my own comments and clusters?
Edit REMARKS (an id, the source, an ISO date and the text), RULES and FIRST (each cluster's id and its first name). Add a cluster by adding a rule and a name; the cells are drawn from the list. Top words are counted from ALL_WORDS, the words of every rule, so a word shows on a chip when a comment in that cluster contains it.
How does renaming work?
Press a cluster's name, type and press Enter. An empty name is refused and the old one stays, with a line that says so; Escape cancels. The new name is used everywhere, including in the Move to lists and in the status line ("Moved to Revenue.").
What stays local?
The names and the placements. Nothing is saved or sent, and Reset puts both back. In a real app, store a placement and its rename with the comment, record who moved it, and keep the rule's original answer so you can measure how often people disagree with it.
Is it accessible?
Each cell is a labelled region you can reach with Tab and scroll with the arrow keys. Move to is a native select named for the comment it moves, so it works with every screen reader and on touch screens; after a move, focus lands on that comment's select in its new cell, and the status line says where it went. The rename field has its own label.