shadcn.io is not affiliated with official shadcn/ui
Password Vault Command Menu Block for Svelte
A password vault's command menu hung under the key icon of a browser bar: ten logins, cards, secure notes and identities, with a footer whose copy verbs follow the highlighted row's type and put a demo value on the clipboard.
Installation
Overview
Search a vault and copy exactly what the page needs with this password command menu for Svelte with Ark UI. It opens from the key icon of a drawn browser bar in Latchwell, a password vault, over a sign-in page, 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: ten items in four groups (Logins, Cards, Secure notes and Identities), each with an icon, a title and the line under it, and the footer lists the verbs of the highlighted row's type. A login copies its password with Enter, its username with Alt U and its one-time code with Alt T; a card copies its number or its expiry with Alt E; a note copies its text; an identity copies its name or its email with Alt M. The verbs are buttons too, and on a phone they shrink to one hint. 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 items and query. For vaults, autofill pickers and any menu whose actions depend on what is selected.
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 browser bar over a sign-in 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.
How do the footer verbs follow the row?
The block keeps the highlighted row's value in state, fed by each library's own highlight event, and footVerbs returns the verbs of that row's type: three for a login, two for a card or an identity, one for a note. The footer shows them as buttons that keep focus in the field, so the footer changes while the list does not move, and an empty search leaves the footer without verbs.
What does each verb put on the clipboard?
A typed fake value, written with navigator.clipboard.writeText: a password beginning "demo-pass", a username, a six-digit code, a card number of zeros ending in the last four, an expiry, the note's text, a name or an email. The status line says what was copied and for which item. If the browser refuses the clipboard, it says that instead.
Does the vault clear the clipboard?
This demo never touches the clipboard again after a copy, and the status line says a real vault would clear it after 30 seconds. In your app start a timer in the copy handler, write an empty string when it runs and say so on the status line, and pick the delay your threat model needs.
What stays local, and how do I wire it?
All of it. The ten items and every value are typed constants, and there is no generator and no sync. In your app keep only titles and the second lines in the list state, and fetch a secret field from your vault when a verb runs rather than holding every password in the page.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter runs the row's first verb, and Alt U, T, E and M run the others where its type has them. 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.