shadcn.io is not affiliated with official shadcn/ui
Password Expiry Notification Block for Radix UI
A workplace identity service telling you your password expires in 7 days: the policy and dates on one side, a new-password field on the other with a four-check live checklist, a strength bar and an Update password button that waits until every check passes.
Installation
Overview
Warn about an expiring password and let the person fix it on the spot, with this password expiry notice for React with Radix UI. It is Lockwick, a workplace identity service, in one hairline frame with a plus mark on each corner and a divider between two halves. The reason comes first: "Your password expires in 7 days", worked out from the page's fixed now, with the last change, the expiry day and the 90-day rule in a Data List. The form is a Password Input inside a Field, and as you type a checklist ticks off four checks (12 or more characters, a number, a symbol, not one of your last five) while a Progress bar fills with the same count. Update password, the one Shine Button, stays quiet until all four pass. Guides draw the lines. For identity, security and admin products that rotate passwords.
FAQ
Does it change a password?
No. Update password only checks the four rules in the browser, then the notice reads as renewed with a new expiry day, and the status line says "Password updated in this demo. Nothing was saved." The line under the field says the same from the start. In your app call your identity service from submit, keep the rules in CHECKS in step with your policy, and check reuse on the server, since the page never sees your real history.
Where do the last five passwords come from?
REUSED is a made-up list of five, compared without regard to case, so you can see the fourth check fail by typing one of them. A real app should never send old passwords to the page: ask the server whether the new one is allowed and show the answer in the same checklist row.
What happens if I press Update password too early?
The button is marked unavailable rather than disabled, so it keeps focus and stays readable. Pressing it says how many checks are still to go ("Not updated: 2 checks to go.") and moves focus back to the password field. Enter in the field does the same.
How are the days worked out?
AS_OF is the page's fixed now (a Wednesday) and the last change is a typed ISO moment; the expiry is that moment plus POLICY_DAYS, and the days to go are the difference in whole days. Nothing reads the clock, so the page says the same thing everywhere. In your app pass the real change and expiry times and format them in the viewer's zone if you prefer.
Is it accessible?
The checklist is a labelled list and each row says "Met:" or "Not met:" to a screen reader as well as showing a tick or an empty circle, so no state is colour alone. The strength bar is named, the field keeps its label and a description, and one polite status line reports each result. The Show password button is part of the field.