shadcn.io is not affiliated with official shadcn/ui
Domain Management Table Block for React
A table of domains where Make primary is a pressed button held by exactly one row, an unverified domain has Check again that fails once then verifies, and SSL and renewal read as words and days from a fixed date.
Installation
Overview
Keep exactly one primary domain and verify the rest, with this domain management table for React with Base UI. Each row is a domain at a registrar: its DNS status as a word and a dot, its SSL (Active or Pending), "Renews in 41 days" counted from a fixed 9 Oct with the date under it, and when it was added. Make primary is a pressed Button (aria-pressed): pressing it on another verified domain gives that one the mark, releases the previous one and says both in a polite line. A domain whose DNS is not verified has Check again beside its status: it waits a second, then the typed script answers, the first check failing with "TXT record not found yet" under the status and the second verifying it, which turns its SSL from Pending to Active and lets it be made primary. On a phone SSL and renewal fold under the domain and Make primary shrinks to a star. It's built from Button, Badge and Guides. For registrar panels, site settings and any list where one item is the default.
FAQ
How does the one-primary rule work?
A single primary id holds the choice, and a row's button is pressed when its id matches, so no two rows can both be pressed. Pressing another verified domain moves the id and the polite line names the domain that released it. Pressing the primary again changes nothing and says it is already primary; an unverified domain's button is aria-disabled and answers "Verify gorsemere-journal.example before making it primary."
What does Check again do?
It shows a spinner for a second (at once under reduced motion), then counts the attempt for that domain. The first attempt fails with "TXT record not found yet" and the second verifies it, which is a script, not a DNS lookup. Focus returns to Check again when it can take it again, or to the row's Make primary button once a verified domain no longer has one.
How is the renewal counted?
From a typed AS_OF date, never from the clock: daysUntil subtracts two UTC midnights and the text says "Renews in 41 days", or 1 day. The date underneath is a time element with the machine value, so the page reads the same on the server and in any time zone.
Is it accessible?
The pressed state is announced by aria-pressed, each button is named by its domain ("Make primary: gorsemere.example"), and DNS and SSL are words with a dot rather than colour. The star on a phone button keeps its name through the hidden label.
How does it look on a phone?
The SSL, Renews and Added columns go, SSL and renewal appear as one line under the domain name, which wraps instead of truncating, and the DNS cell stacks its badge over Check again. Make primary becomes a 32 pixel star toggle.
What stays local, and how do I wire it for real?
The six domains are typed with reserved example names, and the primary, the checks and the SSL state are this page's state. To make it real, call your registrar from makePrimary and check, show the TXT record the user must add, and replace the script with the real verification result.