Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Smart Search Comments Block for Solid

A comment search box that understands author:, status:, has: and quoted phrases, turns them into removable chips, flags unknown operators and marks the matches in twelve results.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Find a moderator's comment with words and operators using this smart search for Solid with Ark UI. A compact header names the search, and one hairline frame holds the box, the parsed chips, the operator help and the results. The Input understands author:, status:, has: and "an exact phrase"; as you type, each part becomes a removable chip under the field, and an unknown operator such as foo: or a value an operator does not take shows a problem line instead of being ignored. An "Operators" Collapsible holds a Data List with an example button for each, which adds it to the query. The twelve sample comments are filtered in the page, the typed words are marked with Search Highlight Text, the count reads "3 of 12" and an Empty state names the query and offers to clear it. The results keep a held height. On a phone the chips scroll sideways in one line. For moderation queues, forums and support desks where a plain box is not enough.

FAQ

How do I fill it with my own comments?

Edit REMARKS (the author id, the words, a status and the has list of link, code or image) and PEOPLE. The operators live in OPERATORS, each with a key, the values it takes and an example, so a new operator is one row plus a case in fitsToken.

How does the query become chips?

One regular expression cuts the text into quoted phrases and whitespace-separated words, and each piece is read as an operator, a phrase or a word. A word matches if it appears in the comment, and every chip must match, so adding a chip narrows the results. A chip with a problem is shown with a warning mark and ignored in the search.

Which words are marked?

The first phrase or word in the query. The component marks one string, so operators are never marked and further words narrow the results without being highlighted. If you need more marks, repeat the highlight for each term in your own code.

What stays local?

The query and the chips live in the page, and the results are filtered from a typed list in memory. To make it real, send the parsed chips (not the raw text) to your search endpoint, and validate operators on the server too: the client check is only help.

Is it accessible?

The field is named "Search comments", is marked invalid with a described alert when an operator is wrong, and the chips are buttons named "Remove status:flagged". The operator list is a real description list inside a button-controlled section. Each change is read out in the polite status line, and removing a chip returns focus to the field.

How does it look on a phone?

The field takes the full width, the chips stay on one line that scrolls sideways so the frame never grows, and each operator row puts its example button beside the name with the explanation under it.