shadcn.io is not affiliated with official shadcn/ui
Email Templates Settings Block for React
An email templates window of three panes: the templates with an on switch each, an editor with subject, message and variable chips that insert at the caret, and a drawn email filled from a sample person you pick.
Installation
Overview
Edit the emails a product sends and see them as a person would, with this email templates window for React with Base UI. It is a fixed-height window with its own top bar and three panes. The first is a list of four templates (Welcome, Password reset, Invoice paid, Invite), each with when it goes out and a Switch that turns that email on or off. The second is the chosen template's editor: an Input for the subject, a Textarea for the message and a row of variable chips such as the first name or the action link, which insert at the caret or replace the selection. The third is a drawn email with every variable filled from a sample person chosen in a Preview as Native Select; a variable the editor doesn't know is flagged under the message and shown as typed in the preview. The top bar's one Shine Button sends a test: it says which template and which person, and refuses a template that is off or has an unknown variable. Every change applies at once and the status line at the window's foot says so. On a phone the list and the chosen template are one pane at a time with a Back button, and below a wide screen the editor and the preview share the pane behind an Edit and Preview toggle (Segment Group). It's built from Switch, Input, Textarea, Native Select, Segment Group, Button, Shine Button and Guides, with a CSS entrance only. For an email design tool, a CRM or any product whose customers edit their own messages.
FAQ
How do I add a template or a variable?
Add an entry to START with its id, name, when it goes out, subject, message, whether it is on and uses, the variables its chips offer. A variable is any id in KNOWN, written between double braces in the text, and each sample person in PEOPLE has a value for it, so a new variable needs a line in KNOWN and a value per person. The preview, the flagged unknown variables and the chips all read from those lists.
How do the chips work, and what counts as an unknown variable?
A chip inserts its variable where the caret is in the message, or replaces the selected text, then puts the caret after it and focus back in the field, and the status line says what was inserted. The preview replaces every known variable with the sample person's value. Any other name between double braces is flagged under the message (and read with the field) and left as typed in the preview. Names are matched ignoring case.
What does Send test do?
It sends nothing. It checks what a real send would need: a template that is off is refused and focus goes to its switch, one with an unknown variable is refused and focus goes to the message, and otherwise the status line says the test is ready for the previewed person and that nothing was sent. To make it real, render the template on your server with that person's data and send it through your mail service.
What stays local, and how do I make it real?
Everything. Edits, switches and the previewed person live in this page's state and are gone on reload, and no mail is sent. To make it real, store the templates with the account, render them on the server with the same substitution (and escape the values), and show the real list of variables each template is allowed to use.
How does it look on a phone, and by keyboard?
The window keeps its height and shows one pane at a time: the list first, and choosing a template replaces it with the editor, moving focus to the template's name, under a Back button that returns to the list with focus on the row you left. The toggle switches between the editor and the preview; at a wide width both show side by side and the toggle goes away. Each row is a real button marked as current, each switch is named for its email, and the status line is a polite live region present from the start. The message and the subject take their direction from what is typed.
Related
- Pro
SMTP Settings
Domains and deliveryAn outgoing mail settings panel that leads with how mail will leave, a server form with presets, an encryption choice and a masked password, beside a dark terminal that plays a simulated SMTP session or stops at the mismatch a real server would give.
- Pro
Email Preferences Settings
NotificationsA preference-centre page, the one an email footer links to: five topics each with a switch and a frequency menu, a digest mode, a computed email volume and an unsubscribe-from-everything that locks the rows and turns Save into Resubscribe.
- Pro
Notification Channels Settings
Alerts and auditA destinations window for alerts: a rail of Slack, email, PagerDuty, webhook and SMS destinations with a status word, beside the chosen one's routing by severity, a pause switch and a simulated test.
- Pro
Auto Replies Settings
NotificationsA vacation responder settings panel that leads with the sentence the settings amount to, a form with a subject, a message with variable chips, two date fields and a once-per-sender rule, beside a framed drawn email filled from a sample sender.
- Pro
Changelog Preferences Settings
NotificationsA changelog email panel of subscription cells on shared hairlines, one per product area with its release strip and a Follow toggle, a delivery choice, locked breaking changes and a computed email volume.
- Pro
Mobile Push Settings
NotificationsA push settings panel that leads with a 24-hour strip of quiet hours, a critical-alerts switch, and per-device Push, Sound and Badge toggles with a save bar that counts unsaved changes.