shadcn.io is not affiliated with official shadcn/ui
DNS Records Dashboard Block for Radix UI
A zone's nine DNS records filtered by type, with an Add record form that validates A, AAAA, CNAME, MX and TXT values and a Check propagation button that turns new records from Propagating to Active.
Installation
Overview
Add a record and see it resolve, with this DNS records panel for React with Radix UI. A hairline frame with a plus mark on each corner holds a Toggle Group that filters the zone's records by type (All, A, AAAA, CNAME, MX, TXT), each with its count, and a table of type, name, value, TTL and state. Add record, a Shine Button in the header, opens a form in place with a Native Select for the type and TTL and an Input for the rest, and checks each type the way a resolver would: an IPv4 address, an IPv6 address, a host name, a priority and a host, or at most 255 characters of text. A CNAME cannot share a name with another record. A new record joins as Propagating; Check propagation reports how many of four resolvers answer, and on the second press turns it Active. A type with no records shows an Empty state. For domain consoles and hosting dashboards.
FAQ
How do I fill it with my zone?
Edit RECORDS and ZONE. A record has a type, a name (@ for the zone itself), a value as the zone file prints it (an MX starts with its priority), a ttl in seconds and a state of active or propagating. The counts, the header sentence and the table are worked out from the array.
What does the form check?
A needs four numbers up to 255, AAAA needs hex groups with at most one double colon and eight groups in all, CNAME and the MX host need a host name with a dot, MX needs a priority from 0 to 65535 and TXT must be 255 characters or fewer, with a counter. The name must be @ or letters, digits, hyphens, dots and underscores. A refused save puts the problem under the field and moves focus to it.
What does Check propagation do?
It is a local demonstration. With records waiting, the first press says two of four resolvers answer; the second turns every waiting record Active. Nothing is looked up. To make it real, query your resolvers (or your DNS host's API) for the record and mark it Active when enough of them agree.
Does the filter change the layout?
No. The table keeps one height whatever you filter to, so the panel does not jump, and a type with no records, AAAA here, shows an empty state with the same room.