shadcn.io is not affiliated with official shadcn/ui
AI Topic Extraction Comments Block for React
A feedback inbox of nine comments with topic chips that show how many comments mention each topic, an Any of or All of filter, the matched words marked in each comment and an empty state for no match.
Installation
Overview
See what an inbox is about before reading it, with this topic filter for React with Base UI. A compact header introduces five topics found in nine comments. The first band is a Toggle Group of chips, each showing its topic and a count worked out from the comments, and a Segment Group that decides whether a comment needs Any of the chosen topics or All of them. The second band lists the comments in a labelled scroll region that keeps its height: the words that matched are marked in the text, and each comment names the topics it touches or says that none was found. A count says "4 of 9", a live line says what is shown, and a filter that matches nothing shows an Empty state without changing the panel's height. On a phone the chips scroll sideways. It is built from Toggle Group, Segment Group, Empty, Badge, Avatar and Guides, with a CSS entrance only. For feedback boards, survey answers and support queues.
FAQ
How are topics found, and how do I use a model instead?
TOPICS is a typed dictionary: each topic has an id, a label and one regular expression made of its words and their endings (for example invoices?, charged?, refunds? for Billing). A comment mentions a topic when the expression matches, the counts on the chips are how many comments match, and the marks in the text are the matches. The block says "Found by counting words in this demo, not by a model." To use a model, replace foundOf(body) with a call that returns topic ids for a comment, and keep the matched phrases if your model can return them, so the marks stay honest.
How do Any of and All of work?
With nothing chosen every comment shows. With one or more topics chosen, Any of shows a comment that mentions at least one of them and All of shows a comment that mentions every one of them. Choosing Billing and Docs with All of shows only the comment that is about both, and choosing Sign-in and Docs with All of shows the empty state, which says what to do about it. The chip counts do not change with the filter: they always count the whole inbox.
How do I fill it with my own comments?
Edit TOPICS and START. A comment has an id, where it came from (from and initials), an ISO at and its body. Ages come from AS_OF and the typed times, never from the clock. Add a topic by adding one topicOf(id, label, source) line; the chip, its count and the marks follow.
What stays local?
The filter and the mode. Nothing is sent, tagged or saved. In a real app, store the topics a comment was tagged with on the server, so that counting words does not have to run in every browser, and keep a way for people to correct a tag.
Is it accessible?
The chips are a labelled group of toggle buttons with their count in the name; the mode is a labelled segmented control. Matches use the mark element, which screen readers announce as highlighted text in some browsers; the topics are also written in words under each comment, so nothing depends on the marking. The live line is present from load and says how many comments are shown after each press.