shadcn.io is not affiliated with official shadcn/ui
Terminal Command Menu Block for Ark UI
A terminal's command menu shown open over a drawn terminal window: fourteen git, npm and docker commands that filter as you type, Tab to complete the highlighted one, and typed output in a dark band marked Simulated output.
Installation
Overview
Run a command from a suggestion list with this terminal command menu for React with Ark UI. It opens from the terminal in Promptwell, whose header holds an outline field with its ⌘ K cap, and a terminal window of earlier commands is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command with a field that starts with a $: fourteen git, npm and docker commands, each in mono with what it does, filtered as you type. Tab completes the highlighted suggestion into the field, and Enter prints its typed output in a band above the field, under the label "Simulated output", and adds the command to the drawn window's history. A terminal is dark by nature, so the band and the window use the dark tokens whatever the page's theme. For preview the menu 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 output and query. For terminals, shell-like consoles and anywhere a command is easier to find than to remember.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a terminal window, 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 and share the block's state, so a command that ran or a query in the copy is in the 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 does Tab completion work?
Tab takes the highlighted suggestion, or the first one when nothing is highlighted, and writes its whole command into the field, so the list narrows to it and Enter runs it. Shift Tab and every other key behave as usual, and Escape closes the menu with focus on the field, so Tab never traps the keyboard. The status line says what the field was completed to.
Why is part of it dark in a light theme?
A terminal is dark by nature, so the output band and the drawn window each carry one dark scope and use the dark tokens whatever the page's theme; the rest of the menu follows the page. Remove the class on those two elements if your terminal should follow the theme too.
Does anything run?
No. Enter prints a typed list of lines for the command, such as the three lines of git status, in a band that holds two lines on a phone and a few more on a wider screen, and labels it "Simulated output". The command is added to the drawn window's history, which keeps the last five. No process is started and nothing is sent.
What stays local, and how do I wire it?
All of it. The fourteen suggestions and their output are constants in SUGGESTIONS. In your app load the suggestions from the user's shell history or a command registry, send the completed line to your real shell in pick, and stream its lines into the band instead of the typed ones.
Is it accessible from the keyboard?
Yes. Type after the prompt to filter, the arrow keys move through the suggestions, Tab completes, and Enter runs. Escape closes the menu with focus on the field, and 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.