shadcn.io is not affiliated with official shadcn/ui
Spotlight Command Menu Block for Ark UI
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 Ark 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 combobox and the first is highlighted when it opens. The real dialog is named by its title and described by its sentence.