shadcn.io is not affiliated with official shadcn/ui
Command Palette Login Block for Vue
A sign-in shown as a command palette over a drawn sign-in page: Email and password, GitHub, Google, SSO and Magic link on the keys 1 to 5, plus Create account and Reset password, filtered as you type.
Installation
Overview
Let keyboard-first people choose how to sign in without leaving the keyboard, with this command palette login block for Vue with Ark UI. It's the sign-in of Runeboard, a keyboard-first workspace. The host header says "Sign in to Runeboard" and holds the real trigger, a field-look outline Button reading "Sign in with…" with its Kbd cap, Ctrl K or ⌘ K, and the sign-in page itself is drawn in greys under a soft scrim inside a hairline frame with a plus mark on each corner. The palette is the part that opens: the Command menu with a group "Sign in with" (Email and password, GitHub, Google, SSO, Magic link) and a group "Account" (Create account, Reset password). The letters you typed are marked in each match, the five methods answer to the keys 1 to 5 while the field is empty, and the foot shows the key hints and a count that is also spoken once typing pauses. Choosing a row says what the next step would be in the line under the page and the drawn page shows the chosen method. It has no coloured button: Enter chooses. For preview the palette is drawn open in place when the page loads; the trigger, or Ctrl or ⌘ K while focus is inside the block, opens the real command dialog with the same rows and the same query. For keyboard-driven products and developer tools.
FAQ
Why is the palette already open, and what do I keep?
So you can see it without a click. On load the palette is the catalog Command drawn inline on the stage, a plain shell that traps and focuses nothing, so the page around the preview keeps working. The trigger opens the real command dialog with the same rows, the same query and the same state, and the copy stays closed until a reload. In your app keep the command dialog and drop the copy: the "in-place" state, the scrim and its shell, the Escape and blur effects.
What does choosing a method do, and how do I wire it for real?
In the demo it only says what would come next ("GitHub chosen, in this demo. Next: GitHub would ask you to allow Runeboard.") and changes the method named on the drawn page. Nothing signs in and nothing is sent. For real, send the choice to your auth flow in the row's pick handler: an OAuth redirect for GitHub and Google, your SSO discovery for SSO, a request for a link for Magic link, and a route for the two account rows.
Which keys work?
Type to filter the rows, use the arrow keys to move and Enter to choose. While the field is empty the digits 1 to 5 choose the five methods straight away (the cap on each row shows it); once something is typed the digits type like any other character. Ctrl or ⌘ K opens the palette while focus is inside the block, never anywhere else, because the site's own search owns that key on the page. Escape closes the palette and puts focus back on the trigger.
What if nothing matches?
The list says so in a sentence that repeats what you typed and suggests what to try ("Nothing matches “zz”. Try a service or an action, like “github” or “reset”."), the foot says "No choices", and the palette keeps its size. Search reads each row's name and a few hidden keywords, so "sso" and "okta" both find the company sign-in.
How does it look on a phone?
The palette in place sits at the top of the stage, so the on-screen keyboard doesn't cover it, with the key hints hidden to make room. The real dialog uses the catalog's phone layout, also docked to the top. The trigger drops under the heading at full width and loses its key cap, because a phone has no Ctrl.
How is it announced to a screen reader?
The trigger is named "Sign in with…" and says it opens a dialog; the palette is a labelled combobox with a list of groups, and the highlighted row is announced. The count is spoken in a polite region a moment after typing stops, not on every key, and the result of choosing is read from the status line under the page.