shadcn.io is not affiliated with official shadcn/ui
Domain Verification Records Success Block for Vue
A confirmation page for a verified custom domain: the three records the product asked for (A, CNAME, TXT) beside what DNS returned, with a Match word between them, a switch between comparing like DNS and as written that underlines the differing characters, and a certificate row.
Installation
Overview
Prove a domain is set up right with this confirmation page for Vue with Ark UI. It is the page Cobblesite, a site builder, shows once a custom domain is verified: the page's side rails and one band, with the message at the start (a success mark, the heading, one sentence and the Shine Button, Open the site) beside a short list of what happened. Under it one framed comparison sets each record Cobblesite asked for beside the record DNS returned, with a word between them, and a row for the certificate. A Toggle Group switches between comparing like DNS (letter case, a trailing dot and the quotes around a TXT value are ignored) and comparing the exact text, which underlines the characters that differ. It is built from Toggle Group, Badge, Shine Button and Guides, with a CSS entrance only. For site builders, hosting dashboards and any setup that checks records.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was looked up or issued. The three expected records, what came back and the certificate dates are typed in PAIRS and CERTIFICATE, and the switch only changes how this page compares them. To wire it, fill expected from the records you asked the customer to add and found from a lookup, and let matches decide the verification.
What does comparing like DNS ignore?
Letter case, a trailing dot on a name and the quotes around a TXT value, because DNS treats those as the same record. In the sample the CNAME comes back as Sites.Cobblesite.example. and the TXT value in quotes, so all three match "like DNS" while only the A record is identical as written. normal does the comparison for the page, and the sentence under the table says how many are identical and what the others differ in.
How are the differing characters shown?
Under "Exact text" the found value is split into stretches that equal the expected value and stretches that differ from it, and the differing ones are underlined, so they read without color. Nothing changes size when you switch: the word between the pair changes from "Match" to "Identical" or "Differs" in a fixed-width badge, and the status line says the result.
Is the switch accessible?
It is a group of two with one always on, named "Compare records", and the status line speaks the result of each choice.