shadcn.io is not affiliated with official shadcn/ui
Connection Switcher Command Menu Block for Vue
A database client's connection switcher as a command menu shown open over a query editor: five connections with engine, host, database and a state in words, a Test button or Alt T that runs a simulated test with a spinner and a typed result, and a toolbar chip that follows the choice.
Installation
Overview
Check a connection before you trust it with this connection switcher command menu for Vue with Ark UI. It opens from the Query editor page of Quaywick, a database client, whose header holds an outline field with its ⌘ K cap, and the client is drawn under a soft scrim inside a hairline frame with a plus mark on each corner: a toolbar that starts with the connection chip, a query and a result grid made of shapes. The menu is the catalog Command, in the middle of the page. Five connections are rows, each with a two-letter engine tile, the engine named in text (PostgreSQL, MySQL, SQLite), the host and database in monospace, and a state as a Badge: Connected, Idle or Unreachable, never green or red. A Test button on each row, or Alt and T on the highlighted one, puts the row into Testing… with a Spinner for 900 ms and then shows a typed result, "Reachable in 38 ms" or "Timed out after 5 s"; the status line says "Simulated. Nothing connected." Choosing a reachable connection moves the chip; choosing the unreachable one says why it stays put. 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 rows and results. For database clients, admin tools, data pipelines and any product that holds several connections to the same kind of thing.
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 the drawn client, 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 the connection you chose, the results of the tests and what 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 does a test work, and is it real?
It is not. Pressing Test, or Alt and T on the highlighted row, starts a 900 ms wait in which the row is aria-busy and reads Testing… beside a spinner (which stops under reduced motion), then shows the connection's typed result. Only one test runs at a time, and pressing it again while one runs says which. The status line and, inside the real dialog, the menu's own live region say "Simulated. Nothing connected." Nothing opens a socket. In your app test is where you would ping the host and time it.
How are states shown without colour?
As words in an outline badge: Connected for the connection in use, Idle for one that answers, Unreachable for one that does not. The state follows the choice, so after you switch, the old connection reads Idle and the new one Connected. A tick marks the current row and screen readers hear "Current connection". An unreachable connection cannot be switched to, and the status line says so instead of pretending.
Why Alt and T, and not the browser's usual shortcut?
Browsers keep Ctrl or Cmd with T for a new tab and never hand it to a page, so a shortcut shown with those keys could not work. Alt and T (Option and T on a Mac) is read from the key's physical position, so Option's special characters do not matter, and the foot shows it only on screens where it fits. It tests the highlighted row; if none is highlighted yet, the status line says to move to one first.
Is it accessible from the keyboard?
Yes. Type to search by name, engine, host or database, the arrow keys move, Enter switches to the highlighted connection, Alt and T tests it and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The Test button is for the pointer and is skipped by the tab order, so a row has one stop. The rows are options of a combobox and the first is highlighted when it opens.
How does it look on a phone?
The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the host drops out of each row's second line, leaving the database, and the key hints go while the count stays. The Test button stays a touch target on every row. The real dialog keeps the Command dialog's own phone layout.