shadcn.io is not affiliated with official shadcn/ui
Security Email Templates Account Block for React
The three security emails an app sends, shown as a framed email beside an editable anti-phishing phrase that appears at the top of every one, with a sample send that only says what it would do and a report link that opens a mail draft.
Installation
Overview
Help people tell a real email from a fake, with this security email section for React with Base UI. A hairline frame with a plus mark on each corner holds Tabs for the three emails, New sign-in, Password changed and New device. Beside the tabs is an Editable anti-phishing phrase: click it, type, press Enter to keep it or Escape to put the old one back. The chosen email is drawn in a Frame on the other side, with the phrase at the top, then a list of the details (when, where, which device), what to do if it wasn't you, and the rules ("We never ask for your password; every real link goes to one address"). Typing in the phrase updates the email at once, and the three emails are stacked in one cell so the panel keeps its height when the tab changes. The Shine Button pretends to send a sample and says what a real one would do, and an outline link opens a mail draft to the abuse address. It's built from Tabs, Editable, Frame, Button, Shine Button and Guides, with a CSS entrance only. For a security page of any app that wants people to spot a fake.
FAQ
How do I change the emails?
Edit EMAILS. Each has a tab name, a subject, a few facts (a name and a value, such as When or Device) and an ask, the one sentence of what to do. The rules every email repeats are RULES, the one address links go to is SITE (a documentation domain here) and the phrase everyone starts with is START. The mock is one module component, so a new email is a new entry.
How is the phrase checked and saved?
It must be 3 to 32 characters. Enter keeps it, Escape or Cancel puts the saved one back, and an invalid phrase is refused with the reason in the line under the field. While you type, the email shows what you've typed; if the text is invalid the email keeps the last good phrase. Nothing is stored: to make it real, save the phrase on the server in commit and put it at the top of every real email you send.
Does the sample send or the report do anything?
The sample does not send anything: it writes a line to the status region saying what a real one would do ("Simulated. Nothing was sent. The email New sign-in to your Pewterfield account would open with blue heron 42"). The report is a real mail link to the abuse address in ABUSE, a documentation domain here, so it opens your mail app and sends nothing by itself. To wire the sample up, send it to the signed-in address from sample.
How does it look on a phone?
The tabs scroll along the top, the phrase field comes next and the framed email goes under them, so you see the phrase you're editing and then its effect. From the medium breakpoint the phrase is in a column of its own beside the email.
Is it accessible?
The tabs follow the usual keyboard pattern and the field is a real input with a name, a hint tied to it and Edit, Save and Cancel buttons, so it works without a pointer. The email mock is an ordinary list and description list (not a picture), and the unseen copies that hold its height are hidden from assistive technology and can't be focused. The status line is a polite live region present from load.