KQ-649 · KEY/VAULT

Key Vault

A vault whose lock says both that it is open and how long it stays open. Flipping the switch turns the lock on snap — the shackle lifts and the keyway takes a quarter turn in one crisp overshoot — while an auto-lock ring drains linearly from a motion value, stopping while the tab is hidden and resuming from what is left, and the vault locks itself from that animation's completion rather than from inside a state updater. The keys exist only while the vault is open, arriving from 8px away on glide in a cascade; the lock is a role="switch", each reveal is an aria-pressed button, and Escape anywhere inside locks the vault and returns focus to the switch.

KQ-649 · KEY/VAULT

Coldbrook Bank · Keys4 keys sealed

Vault locked

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/key-vault

Props

keys: VaultKey[]; default —; The keys in order: id, label, kind and the secret value, which stays masked until an explicit reveal.
label: React.ReactNode; default —; Vault name; labels the card and the key list.
unlocked / defaultUnlocked: boolean; default false; Controlled or initial lock state.
onUnlockedChange: (unlocked: boolean) => void; default —; Fires from the switch, the Escape, or the ring running out.
autoLockMs: number; default 12000; Milliseconds the vault stays open; 0 disables the ring and the auto-lock.
onAutoLock: () => void; default —; Fires from the ring's completion when the vault locks itself.
onReveal: (id: string, revealed: boolean) => void; default —; Fires from the press that revealed or re-masked a value.
onCopy: (id: string, ok: boolean) => void; default —; Fires from the copy attempt with whether the clipboard took it.

Prop	Type	Default	Description
keys	VaultKey[]	—	The keys in order: id, label, kind and the secret value, which stays masked until an explicit reveal.
label	React.ReactNode	—	Vault name; labels the card and the key list.
unlocked / defaultUnlocked	boolean	false	Controlled or initial lock state.
onUnlockedChange	(unlocked: boolean) => void	—	Fires from the switch, the Escape, or the ring running out.
autoLockMs	number	12000	Milliseconds the vault stays open; 0 disables the ring and the auto-lock.
onAutoLock	() => void	—	Fires from the ring's completion when the vault locks itself.
onReveal	(id: string, revealed: boolean) => void	—	Fires from the press that revealed or re-masked a value.
onCopy	(id: string, ok: boolean) => void	—	Fires from the copy attempt with whether the clipboard took it.