shadcn.io is not affiliated with official shadcn/ui
Domain Setup Onboarding Block for Svelte
An onboarding screen that asks which address visitors see, the bare domain or its www form, shows the choice in a drawn browser bar and lists the DNS records to add, each with a copy button and a check that finds them in two steps.
Installation
Overview
Let people point their own domain at a new site without leaving setup, with this domain step for Svelte with Ark UI. It's the fourth step of Pargetby, a portfolio-site builder: the page's side rails run its full height and one band crosses the screen between two rules. After the step header (the product's mark, “Step 4 of 5” and a hairline of progress) and the heading, a domain Input sits beside a Radio Group of two cells, the bare domain or the www address. A drawn browser shows the chosen address in its bar and says which address redirects to it, and a table below lists the records to add at the domain provider, each value with a Copy Button. Check records answers in two steps, “2 of 3 records found” and then all three, with Pending or Verified in words and an icon on every row. Finish is the only colored control, a Shine Button, and waits for all three records. No lookup is made.
FAQ
What changes when I pick the other address?
The browser bar, the sentence under it and the records. The bare domain needs two A records and the TXT proof; the www address needs a CNAME, an A record that sends the bare domain on to it, and the same TXT proof. Changing the choice or the domain also starts the check again, because the records you had checked no longer apply.
How does Check records work?
It is a typed two-step, not a lookup: the first press finds two of the three records, the second finds the rest, and a third press says everything is already verified. Each row shows Pending or Verified as a word with an icon, never as color alone, and the count above the table and the status line follow along. In your app, replace the step in check with a request to your server that looks the records up and returns which ones it found.
How is the domain checked?
By shape only: labels of letters, digits and hyphens, then a top-level domain, in lowercase. A www prefix is refused with a pointer to the choice below, since the choice is what adds it. The problem shows when you leave the field or press Finish, in a line that is always reserved, and the records keep showing the last good domain until the field is right.
Why can Finish look quiet and still be pressed?
Until all three records are verified, Finish is shown in its waiting style and marked as disabled for assistive technology, but it stays pressable so it can explain itself: it says which step is missing and puts focus on Check records. Once all three are verified, it finishes and says so in the status line.
What stays local in the demo, and how do I wire it?
Everything. The records and their values are typed in recordsOf, the clipboard is the only real browser feature, nothing is looked up, published or sent, and the status says “Finished in this demo”. In your app generate the TXT proof per site on your server, look the records up when a person presses Check, and connect the site to the domain when they press Finish.
How does it look on a phone?
Each record becomes a two-line card: type, name and state on the first line, the value and its Copy button on the second. The actions, Check records and Finish, stay pinned to the foot of the screen with the status line above them, and the long sentence under the heading is kept for screen readers only.