shadcn.io is not affiliated with official shadcn/ui
Spotlight Command Menu Block for React
A desktop launcher's search bar shown open across a drawn desktop: apps, files and a web row, tabs that filter by kind, a larger top hit with a one-line preview, and a drawn window that opens on the desktop.
Installation
Overview
Launch apps and find files from one bar with this spotlight command menu for React with Base UI. It opens from the Desktop of Larkbar, a launcher, whose header holds an outline field with its ⌘ K cap, and the desktop is drawn under a soft scrim inside a hairline frame with a plus mark on each corner: a menu bar, a column of icons and empty ground. The bar is the catalog Command with four Tabs, All, Apps, Files and Web, between the input and the list. With something typed the first match is a larger Top hit with a one-line preview and a Badge; the rest follow as Apps and Files, the letters you typed are marked with Search Highlight Text, and "Search the web for …" is always the last row. Choosing an app or a file puts a drawn window with its name on the desktop and says so in the status line; no app opens and no search leaves the demo. The foot lists the keys and counts the results, which is also spoken. For preview the bar is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same rows, tab and query. For launchers, file managers and any app that searches more than one kind of thing.
FAQ
Why is the bar already open, and what do I keep?
So you can see it without a click. On load the bar is the Command drawn inline over a picture of the desktop, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette component and share the block's state, so the tab and the text you typed in the copy are in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How do the tabs and the top hit work?
The tab keeps one kind of result, apps or files, and Web keeps only the web row; the list is the selected tab's panel. With something typed, rowsFor makes the first match the Top hit, with its preview line, and lists the other apps and files after it, so nothing appears twice. The web row is always last on All and Web and never counts as a result. On a phone the tabs scroll sideways and the top hit drops its preview.
How do I reach the tabs from the keyboard?
Tab moves from the input to the tab list and the arrow keys move between the tabs; Tab again leaves the bar. The input stays the place for the arrow keys that move through the rows. Choosing a tab says its name and how many results it holds in the polite message inside the bar.
What stays local, and how do I wire it up?
Everything. Choosing an app or a file puts a drawn window with its name on the desktop, and the web row says the search stays here. In your app replace ITEMS with your launcher's index and pick with the call that opens the app or the file, or opens the browser for the web row.
Is it accessible?
Yes. Type to search, the arrow keys move through the rows, Enter opens the highlighted one and Escape closes the bar and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The real dialog is named by its title and described by its sentence.
Related
- 333Pro
Global Search Command Menu
Search everythingA company intranet's command menu shown open: one input searches pages, docs, people and tags at once, each type is a group of three matches with a row that opens it in place, and the foot counts the results by type.
- Pro
Basic Command Menu
Search everythingA team workspace's home page with its command menu shown open: eleven pages in three groups, a shortcut on the five most used, matches marked, an empty state that says what to try and a foot with the key hints and a spoken count.
- Pro
Quick Open Files Command Menu
Search everythingA cloud drive's quick open as a command menu shown open at the top of a file manager: recent files first, a search across every folder, middle-shortened paths with sizes and dates, kind chips and a sort, and the chosen row selected in the table behind.
- Pro
Recent Items Command Menu
Search everythingA project hub's command menu shown open on what you opened lately: Today, Yesterday and Earlier buckets before you type, recent matches first when you do, opening a row moves it to the top, and a last row clears the list.
- 471Pro
Docs Search Command Menu
Search everythingA docs host's scoped search shown open under the header field: chips for All, Guides, Reference and Releases that carry how many pages match, and results with a path and one line of the page with the matched words marked.
- Pro
Command Palette Navbar
SearchA navbar for a notes app with a field-looking button and a shortcut that open a command palette: recent notes first, then pages, actions and settings in labelled groups, with the keys that work shown beside each row.