shadcn.io is not affiliated with official shadcn/ui
API Reference Command Menu Block for Vue
A delivery-routing API's command menu shown open over a reference page: ten endpoints in three resource groups with the method as a word, and a pane with the highlighted request, a typed sample response and a Copy cURL button.
Installation
Overview
Find an endpoint and take its request with you with this API reference command menu for Vue with Ark UI. It opens from the reference page in Routemill, a delivery-routing API, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command beside a pane: ten endpoints grouped by resource (Shipments, Routes, Webhooks), each with the method as a word in mono, and the pane follows the highlighted endpoint and shows its URL, header and body, its status and a sample response drawn with SyntaxText. Enter, or the Copy cURL button, copies the command. On a phone the pane sits under the list. 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 endpoints and query. For API docs, developer portals and dashboards where the next call is one search away.
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 an API reference page, 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 search 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.
What does Enter copy?
The cURL command of the highlighted endpoint: the method and address, an Authorization header with a made-up test key and, for a POST, a Content-Type header and the JSON body. It goes to the clipboard with the browser's clipboard API and the status line says which endpoint it was for and that nothing was sent. If the browser refuses, the line says that instead.
Are the sample responses real?
No. Each endpoint carries a typed status and a typed JSON object, shown with SyntaxText in a region that scrolls at a fixed height, so a long response never moves the list. The Delete webhook endpoint answers 204 and shows "// No body". Nothing is requested: no address is called.
How does the pane follow the list?
It shows the highlighted row, or the first row when nothing is highlighted, and it falls back to the first match when the search changes. On a phone the request lines are hidden to leave room for the response.
What stays local, and how do I wire it?
The clipboard write is real; everything else is typed. The ten endpoints, their statuses and their responses are constants in ENDPOINTS. In your app generate that array from your OpenAPI file, build curlOf from your base URL and the key the signed-in user holds, and leave the sample bodies to the spec's examples.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows and the pane follows, Enter copies the cURL command, and Tab reaches the Copy button and the response. 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.