shadcn.io is not affiliated with official shadcn/ui
Password Manager Chat Block for React
A password vault's helper answers with a card that makes a sample password in your browser: a length slider from 12 to 32, three character rules, a strength word in bits, Generate again and a Copy button.
Installation
Overview
Show a vault helper making a password inside the conversation, with this password manager chat for React with Base UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Vaultmoor, a password vault: the top bar names the helper with "Vaultmoor, online" and an "Example only" badge, and the log is a short run of Message and Bubble rows. Under the helper's second message sits a password card: a sample password in monospace, a Slider for its length from 12 to 32, three Checkbox rules (capitals, numbers, symbols), a strength word with a Progress bar worked out from the length and the characters allowed, "Generate again" and a real Copy Button. Two reply buttons ask for your saved logins, which come back as a second card of three typed rows with the secret masked and a derived "Weak" under twelve characters. The composer's Shine Button, the only colored control, sends what you type, and the frame is ruled by Guides. For a vault, an account security page or any help desk that shows a result in the thread.
FAQ
What stays in the page, and how do I make it real?
Everything. The password comes from crypto.getRandomValues in your browser, is shown on the card and goes nowhere: nothing is stored, sent or logged, and the card says "Generated here, never stored". The three saved logins are typed rows with no secrets in them. Replies come from a short typed script keyed on words such as "saved", "strong" and "again". To make it real, call your own vault service where post sends the text, and keep the generator in the browser so a new password never travels.
How is the strength worked out?
entropyBits(length, poolSize) multiplies the length by the base-2 logarithm of the characters allowed, so 20 characters from 70 possible ones give 122 bits. The word comes from typed thresholds (under 40 bits Weak, then Fair, Good and Strong from 80) and the bar fills toward 128 bits. There is no breach lookup and no score from a model.
Is the random pick fair?
Yes. Each character is drawn with rejection sampling: a random 32-bit number that would favour the first few characters of the pool is thrown away and drawn again, so every character is equally likely. Lowercase letters are always allowed; capitals, numbers and symbols are the three rules you switch.
What does Copy do?
It writes the shown password to the clipboard with a real clipboard call and the status line under the composer says "Password copied." so a screen reader hears it. If the browser blocks the clipboard, the button's own failed state shows.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log. The slider is named "Length" and reads "20 characters"; each rule is a labelled checkbox; the strength is a word and a number, never a color, and the masked secrets read as "Hidden" followed by their length. Tab runs through the card, the reply buttons, the field and Send.