shadcn.io is not affiliated with official shadcn/ui
Domain Verification Records Success Block for React
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 React with Base 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.
Related
- Pro
Custom Domain Settings
Domains and deliveryA custom domain settings panel that leads with what visitors get at each step and walks four stages on a vertical rail: add a domain, add a CNAME and a TXT record with copy buttons, a simulated two-try DNS check and a sample certificate.
- Pro
DNS Settings
Domains and deliveryA DNS settings panel that leads with a resolver you can ask, then holds the same zone as a filterable records table with TTL and conflict checks and as a zone file parsed as you type, kept in step while it is valid.
- Pro
DNS Propagation Success
Domains and networkA confirmation panel for a saved DNS record: the record as four monospace cells with a copy button for its zone-file line, eight resolvers each Live or Pending with a bar and a count, and a Check again button that moves the next two resolvers to Live until the record has propagated.
- Pro
Certificate Validity Chain Success
Domains and networkA confirmation panel for an issued TLS certificate: three dates on shared hairlines, a validity bar from issue to expiry with a hatched renewal window and a marker the visitor moves along it, and the certificate chain as nested lists with a copy button for each fingerprint.
- Pro
Load Balancer Routing Success
Domains and networkA confirmation window for a new load balancer: the routing drawn top-down from clients through the balancer to three zones of backend dots, the entry hostname with a copy button, and a zone picker that lists the chosen zone's four backends with their addresses.
- Pro
Cache Purge Success
Domains and networkA confirmation panel for a CDN purge: four figures worked out from the data, six edge regions each with a cache bar and the time it took, the purged paths as chips with their object counts, and a local Re-warm that fills the regions one after another.