shadcn.io is not affiliated with official shadcn/ui
Email Preview Notification Block for Svelte
What a notification email looks like before it is sent: pick Mention, Weekly digest or Security alert, switch between desktop and phone width, and Send me a test, which only says it was queued.
Installation
Overview
Check what a notification email will say before anyone gets it, with this email preview for Svelte with Ark UI. It's the template view of Mailtrellis, a transactional email designer, in a hairline frame with a plus mark on each corner. A toolbar that scrolls sideways on a phone holds two Toggle Groups: the template (Mention, Weekly digest, Security alert) and the width (Desktop, or Phone, which narrows the email to 22 rem). The canvas under it is a drawn mail client in greys: the subject, who it is from and to and when, the body, a drawn button and the footer that says why you got it, with a Badge for when it goes out. The digest adds its updates up from its own lines. The canvas keeps one height and scrolls inside. "Send me a test" only says a test was queued in this demo. It's built from Toggle Group, Button, Badge and Guides. For a notification settings page, a template editor or any place you want to see the message before it goes.
FAQ
How do I change the emails?
Edit MENTION, DIGEST and SECURITY at the top of the file: each has a subject, a body (one paragraph per line), an optional quote, optional facts (a term and a value each), the action the drawn button says, a cadence for the badge and a footer. The digest's subject adds up its facts (totalOf), so "14 updates" is always the sum of the three lines under it. SAMPLE, SENDER and RECIPIENT name the made-up product and the people.
What does the width switch do?
It narrows the email column from 36 rem to 22 rem so you can see how the same email wraps in a phone's inbox; it doesn't change the page's own layout, and on a real phone the column is as wide as the screen anyway. The switch only moves the column: the canvas keeps its height and scrolls inside.
What stays local, and how do I make it real?
Nothing is sent. "Send me a test" says "Test of the Security alert email queued in this demo. Nothing is sent." and that is all. To make it real, post the template id from sendTest to your server, which renders the same template with the signed-in person's address; a real email also needs inlined styles and links, which this drawing does not have.
Why does each email say why you got it?
Because a notification email that can't be traced to a setting gets reported as spam. The Mention and digest footers name the setting and where to change it; the Security alert says it is always sent, and has no switch to turn off, because it is the one you want even if you have turned the others off.
Is it accessible?
The drawn mail client is one figure with a name, the email is an article labelled by its subject, and the canvas is a named region you can scroll with the keyboard. The two toggle groups are named ("Template", "Width") and work with the arrow keys, and a polite status message says which template and width are showing. The drawn button is text only, since an email's button is not something to press here.