shadcn.io is not affiliated with official shadcn/ui
Domain DNS Record Command Menu Block for Radix UI
A DNS console's command menu shown open over a domains page: six domains by DNS state with SSL expiry, a pane with the expected record in mono and a Copy button, and a 900 ms Verify with a typed result.
Installation
Overview
Find a domain and see the exact DNS record it expects with this domains command menu for React with Radix UI. It opens from the domains page in Hostlane, a DNS console, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command beside a pane: six domains grouped by DNS state (Misconfigured, Pending, Verified) with their record type and SSL expiry, and the pane follows the highlighted domain and shows the expected record's type, name and value in mono with a Copy button. Enter runs a check, a 900 ms wait with a spinner and then a typed result that can move the domain to another state, and Alt C copies the value. On a phone the pane sits under the list. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same domains and query. For hosting, DNS and email consoles where setting up a record is a copy and a check.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a domains page, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a check or a search in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
What does Verify do?
Enter on a domain starts a check: the pane shows a spinner and "Checking…" for 900 ms, then the domain takes a typed result and the status line reads it out, for instance that a pending CNAME was found and the domain is now verified, or that another still finds the wrong address. The check does not query DNS. Only one check runs at a time, and pressing Enter during one says to wait.
How does the record pane work?
It follows the highlighted row and lists the type, the name and the value of the record the domain expects, in mono and left to right even in right-to-left pages, with a Copy button for the value. The pane has a fixed height with a reserved slot for the last check's result, so highlighting and checking never move the list.
What does the copy write?
The pane's Copy button, and Alt C (Option C on a Mac) on the highlighted domain, write the record's value, such as cname.hostlane.example, to the clipboard with the browser's clipboard API, and the status line says which domain's value was copied. If the browser refuses, the line says that instead.
What stays local, and how do I wire it?
The clipboard write is real; everything else is typed. The six domains, their states, certificates and check results are constants, and every date is fixed. In your app build START from your domains API, call your verification endpoint in the check effect in place of the 900 ms timer, and show the failure it returns in the same reserved slot.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows and the pane follows, Enter verifies, and Alt C copies the value. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.