shadcn.io is not affiliated with official shadcn/ui
Workspace Switcher Command Menu Block for Ark UI
A knowledge base's workspace switcher as a command menu shown open under the switcher at the head of the sidebar: member counts, a star that pins a workspace live into a Pinned group, and a Create row that adds a new workspace from what you typed and switches to it.
Installation
Overview
Keep every team's own space one keystroke away with this workspace switcher command menu for React with Ark UI. It opens from the Knowledge base page of Deskfold, a team knowledge base, 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: a sidebar whose head is the switcher, and a list of pages. The menu hangs from the switcher and is the catalog Command. Each of seven workspaces is a row with a two-letter tile, its name and its member count, a tick on the one you are in, and a star at the end. Pressing the star pins the workspace, and it moves live into a Pinned group while the status line says so; Shift and Enter pin the highlighted row from the keyboard. Type a name that no workspace has and a last row, Create workspace with that name, appears: choosing it adds the workspace to the list and switches to it. Nothing is saved or sent. 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, pins and query. For team tools, knowledge bases, chat apps and any product with many spaces and one switcher.
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 under the drawn switcher, 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 pins, the workspaces you created 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 pinning work without a mouse?
The star is a plain button the pointer can press and the tab order skips, so a row has one stop and the arrow keys stay simple. The keyboard's way is Shift and Enter on the highlighted row: a capture listener reads the highlighted row, toggles its pin and stops the Enter, so the workspace is not chosen. The star's name says what it will do ("Pin Engineering", "Unpin Engineering") and is pressed or not. The status line says what moved, and inside the real dialog, which hides the page's line, the menu's own live region says it too.
When does the Create row appear?
When the box holds text and no workspace has exactly that name, ignoring case and accents. It is the last row, it reads Create workspace and the name in quotes (cut at 28 characters), and choosing it adds a workspace with one member, switches to it and closes the menu. Type the name of a workspace that exists and the row goes away, so you cannot create a duplicate by accident. In your app this is where the request to create it would go.
What stays local, and how do I wire it?
Everything. Pins, the created workspace and the current one live in the block's state and are gone on a reload; nothing is saved and no request goes out. In your app keep togglePin, create and pick as the three places that call your API, and keep the status line, which is the one polite live region. The member counts and keywords are typed data here.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move, Enter switches to the highlighted workspace, Shift and Enter pin 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 rows are options of a combobox and the first is highlighted when it opens.
How does it look on a phone?
The drawn sidebar shrinks to its head, the switcher. The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the key hints go and the count stays. The star stays a touch target on every row, since a phone has no Shift key. The real dialog keeps the Command dialog's own phone layout.