shadcn.io is not affiliated with official shadcn/ui
Unused Credentials Account Block for Vue
A table of every way into an account (password, passkeys, Google sign-in, authenticator app, backup codes, a token), ranked by how long each has gone unused, with Unused badges at 90 days, Remove with an in-place confirm and Undo, and one dialog to remove them all.
Installation
Overview
Find the ways into an account that nobody is using, with this unused credentials section for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a table of seven credentials, the longest idle first: what each is, when it was last used and, for any that went 90 days or more without use, an outline Badge such as "Unused 141 days". Remove asks in place with Confirm and Cancel (Escape cancels) and leaves the row as "Removed in this demo" with Undo, so the table never changes height. The header counts the stale ones ("2 of 7 unused 90+ days") and its outline button removes them all after an Alert Dialog names them. The password and the backup codes can't be removed here and say why. On a phone each credential is a card. It's built from Alert Dialog, Badge, Button and Guides, with a CSS entrance only. For the security page of any app with several ways to sign in.
FAQ
How do I list my credentials?
Edit CREDENTIALS: a name, a kind (for its icon), a detail line, the ISO day it was last used ("" when never) and whether it can be removed. Idle days are counted from the typed AS_OF day, the table is sorted by them, and STALE is the number of days that counts as unused. The counts in the header and the dialog are worked out from the rows, so they are always true.
What stays local, and how do I wire a real removal?
Removing changes this page only: the row says it was removed, Undo puts it back and the status line says nothing was sent. In a real app each Remove calls your server, which revokes the credential, signs out any session that used it and refuses to remove the last way to sign in. Never let the page decide which credentials may go: send the ids and check them on the server.
Why can't the password or the backup codes be removed?
The password is the base of the account and the backup codes are for recovery, which is exactly what you hope not to use, so being unused says nothing about them. They show as "Can't be removed" and "Kept for recovery" instead of a button, and never count as stale.
How do the confirms work from the keyboard?
Remove swaps for Confirm and Cancel with focus on Confirm, Escape cancels from anywhere in the block, and focus returns to Remove. After a confirm focus lands on Undo, which is in the same place. The header's button opens a modal dialog with focus on Cancel; its action removes every stale credential at once.
How does it look on a phone?
Below the medium breakpoint the table is a list of cards with the same facts: the name and detail, when it was last used with its Unused badge and the action. Both layouts share one state, so removing in one shows in the other, and neither changes height when a row is removed.