shadcn.io is not affiliated with official shadcn/ui
DNS Propagation Domain Status Monitoring Block for Vue
One DNS change spreading across eight fictional resolvers as bars split where each cache expires, a range that scrubs the minutes since the change, and the answer each resolver would give at that minute.
Installation
Overview
Answer "has my DNS change reached everyone yet?" with this domain status panel for Vue with Ark UI. It is Resolvewell, a DNS change tracker. A Native Select in the header picks one of two typed changes, an A record on an app domain or an MX record, and a list of facts states what changed, when, the old TTL and the old and new answers in monospace. Eight resolvers (made up, never real public ones) are rows in a hairline frame with a plus mark on each corner; each row is a bar on a 0 to 60 minute axis, pale until that resolver's cached answer expires and solid after, with a thin line at "now". A range under the rows scrubs the minutes since the change, and every row reads the answer it would give at that minute ("old 192.0.2.10", "new 192.0.2.44"). The header sentence counts who already answers with the new record and when the last resolver flips. Guides draw the frame and its bands. For DNS migrations, mail cut-overs and anyone waiting out a TTL.
FAQ
How do I track my own change?
Edit CHANGES: each has the record, the old and new answers, the minute of the day it changed (at), the old record's TTL in seconds, the minutes since the change at "now" (elapsed) and expires, the minute each resolver's cache runs out, in the order of RESOLVERS. A resolver answers with the new record from its expires minute on, and the last flip is the change's time plus the largest one.
Why does each resolver flip at a different minute?
A resolver keeps the old answer until its copy expires, and each copy was fetched at a different time, so the flips are spread between the change and the old record's TTL. The bar shows that: pale until its expiry, solid after.
Does it query any resolver?
No. The resolvers, their expiry minutes and the addresses (documentation ranges) are typed examples, and nothing is queried. In your app check each resolver with your own probe and fill expires from what it returned.
How does the scrub work?
It is a native range named "Minutes since the change", with a value text such as "30 minutes after the change, 14:20 UTC". Arrow keys move it one minute and the rows update at once; a polite status line speaks the count of new answers. Changing the select puts it back on "now".