Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Global Search Comments Block for Vue

A command palette shown open over a project board that searches the comments of three projects at once, grouped by project, with project toggles, marked snippets and a real command dialog on Ctrl or Command K.

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

Search every project from one box with this global comment search for Vue with Ark UI. A compact header names the workspace and holds a search field look-alike with the Ctrl or Command K hint. Under it a drawn project board has the palette open in place: the Command with an input, results grouped by project (Atlas, Harbor, Lantern), each row a marked snippet with its author and thread, and a foot with three project Toggles that choose which projects are searched, the count ("9 comments in 3 projects") and a spoken summary a moment after typing stops. An empty result names the query. Choosing a row changes the thread on the drawn board and the status line says "In this demo only". Pressing the header field, or the shortcut while focus is inside the block, opens the real command dialog with the same rows and the same query. The palette docks to the top of the stage on a phone. For agencies, multi-project teams and any app where comments live in many places.

FAQ

How do I fill it with my own comments and projects?

Edit PROJECTS (an id and a name) and HITS (the project, the author, the thread title and the words). The rows, the groups and the count are all derived from those two lists and from the query, so nothing is typed twice. ALL_ON is which projects are searched on load.

What do I keep in my app?

The Command, the CommandDialog and the rows. The drawn board, the in-place copy (the scrim, its shell, the Escape and blur effects) and the "in-place" state exist only so the preview shows the palette open; delete them and open the dialog from your own button.

How do the project toggles work?

Each toggle adds or removes a project from the search. A project that is off contributes no rows and no group, and the count and the spoken summary say so. With every project off the palette says "No project is switched on" instead of a blank list.

What stays local?

The query, the toggles and the opened thread live in the page, and the comments are a typed list searched in memory. To make it real, send the query and the chosen project ids to your search endpoint and debounce typing; open the thread by navigating when a row is chosen.

Why does the shortcut only work inside the block?

So it does not take the key from the site's own search. The listener is on the block's root and only runs while focus is inside it. In your app attach it to the document and skip it when someone is typing in a field that uses the same key.

Is it accessible?

The palette is a labelled combobox with a list of grouped results; arrow keys move, Enter opens and Escape closes, and focus returns to the search field. Matches are marked with a tint, never colour alone. The count is spoken once typing pauses, not on every key, and the toggles report whether they are pressed.