shadcn.io is not affiliated with official shadcn/ui
Saved Logins Check-up Account Block for Radix UI
A check-up of saved logins: eight sites with username and one flag in words (reused, weak, found in a breach, OK), a segmented view with counts, a search, bulk select, Delete selected with Undo and Change password; no password is shown.
Installation
Overview
Show people which saved logins are putting them at risk, with this saved logins panel for React with Radix UI. Eight sites are rows with the site's name and address, the username kept, one flag in words (Reused on 3 sites, Weak, Found in a breach or OK) and a Change password button on every row that needs one. No password is ever shown. A Segment Group switches between All, Needs attention and Fine, each with its count, and a search narrows by site or username. A Checkbox in each row selects it, Select all shown and Clear sit in a bulk line, and Delete selected removes the chosen logins; a permanent Undo in the foot brings the last batch back. The reuse flag is worked out from the rows that are left, so deleting one of three reused logins reads Reused on 2 sites, and the last pair stops reading as reused. Changing a password marks that login as changed. An unseen copy of every row keeps the panel's height, and an Empty state covers an empty view. It's built from Segment Group, Checkbox, Input, Empty, Button and Guides, with a CSS entrance only. For password managers and security pages.
FAQ
How do I fill it with real logins?
Edit LOGINS. Each has an id, the site name, its domain, the user kept and a flag (reused, weak, breach or ok). The words are worked out: a reused login reads "Reused on N sites" from how many reused logins remain, so don't type the number. Run your own checks on the server and send only the flag, never the password, so this page has nothing to leak.
What stays local, and how do I make the actions real?
Everything: Change password marks the login as changed in this page's state and the status line says nothing was sent; Delete selected removes the rows from state, and Undo restores them, which a real vault can only do if you keep the data for a while. To wire it, open the site's change-password page from change, and call your delete endpoint from remove, keeping a recovery window on the server for Undo.
How does selecting work?
Each row has its own checkbox, named for its site. Select all shown ticks every row in the current view and Clear unticks them; the count reads "2 of 5 selected" and counts only rows you can see. Delete selected does nothing and says so when none is ticked. After deleting, focus moves to Undo.
Does the panel move when I filter, search or delete?
No. The rows sit over an unseen copy of all eight, so the list keeps its height whatever the view hides or you delete. When nothing is left to show, an empty state fills the space and offers a way back: Show all logins, or Undo when everything was deleted.