shadcn.io is not affiliated with official shadcn/ui
Email Domain Onboarding Block for Svelte
A setup panel that asks who a newsletter is sent from, shows a drawn inbox row that follows the choice, and for your own domain opens SPF, DKIM and DMARC rows with copyable values and a two-step check.
Installation
Overview
Let a sender choose how their mail is addressed and see the result before they change a DNS record, with this sender step for Svelte with Ark UI. It's a setup panel of Postmoor, a newsletter tool, ruled by Guides in bands. A Radio Group of two cells chooses Postmoor's address or your own domain; a drawn inbox row shows the sender's name, the address behind it, the subject and a “via postmoor.example” tag that appears for Postmoor's address and for a domain whose records have not passed. Choosing your domain opens an Accordion of SPF, DKIM and DMARC: what each does in two sentences, the value with a Copy Button and its state in words. Check records answers in two steps, and Use this sender, a Shine Button, saves the choice.
FAQ
What does the inbox row show?
What a reader's inbox will show: the newsletter's name, the address it comes from, the subject and a preview. For Postmoor's address, and for your domain until all three records pass, it carries a “via postmoor.example” tag, which mail clients add when the sending server and the visible address differ. A sentence under the row says it in words.
What are SPF, DKIM and DMARC for?
SPF lists the servers allowed to send for the domain, DKIM signs each message with a key receivers can check, and DMARC says what to do when those fail and where to report. Each row says that in two sentences, gives the host to add a TXT record on and a typed value you can copy. The values here are samples; your server issues the real ones.
How does Check records work?
It is a typed two-step, not a lookup: the first press verifies SPF and DKIM, the second verifies DMARC. Every row shows Pending or Verified as a word with an icon, the count above the rows follows, and changing the domain starts over. In your app replace the step in check with a request that looks the three records up.
How do I move between the three rows with the keyboard?
Tab reaches each row's heading button and Enter or Space opens it; one row is always open. The up and down arrow keys also move between the rows.
What stays local in the demo, and how do I wire it?
Everything but the clipboard. The domain is checked for its shape only, the records are typed, nothing is looked up or sent, and Use this sender keeps the choice in the tab and says what the inbox will show. In your app save the sender on your server and send only from a domain whose records you have verified.
How does it look on a phone?
The two choices stack, the inbox row wraps its tag under the name, and the action foot sticks to the bottom of the screen with the status line above it. The panel's height does not change between the two choices: the records and the note for Postmoor's address share one cell.