shadcn.io is not affiliated with official shadcn/ui
DNS Record Manager CRUD Block for React
A registrar's zone editor with locked NS and SOA rows, one Dialog form for adding and editing that changes its hint with the record type, named validation, and a delete that lists the records pointing at it.
Installation
Overview
Edit the records of a domain without breaking the ones others depend on, with this DNS manager for React with Base UI. Ten records of one zone sit in a table with type, name, value and TTL under a type Toggle Group. The NS and SOA rows are locked: a lock and "Managed by the registrar" instead of buttons. Add record, an outline Button in the header, and each row's Edit open the same Dialog: the type changes the hint under the value, the priority field is live for MX only, and a save names every refusal (an A needs an IPv4 address, a CNAME can't share a name or sit on the root, an MX priority runs from 0 to 65535, no exact duplicates). Save record is the one Shine Button. Delete asks in an Alert Dialog that lists the records pointing at it, and the whole set leaves one Undo. For registrars, hosting panels and domain tooling.
FAQ
How do I load my own zone?
Set ZONE and edit RECORDS: each has an id, a type, a name (@ for the root), a value, a ttl in seconds that matches a preset and, for MX, a priority. Addresses here are documentation ranges (192.0.2.0/24, 198.51.100.0/24, 203.0.113.0/24, 2001:db8::/32) and the zone is an example domain.
Why can't I edit the NS and SOA records?
They stand for what the registrar manages, so the row shows a lock and the words "Managed by the registrar" with no edit or delete, and the type list in the form leaves NS and SOA out. Lock other types in lockedOf.
What does the delete dialog show?
Records that point at the one you are deleting: CNAME and MX records whose value is its name, unless another address record keeps that name alive. With dependants it reads "www and docs point here: delete all, or cancel", the action counts them ("Delete 3 records"), and one Undo restores the whole set.
Which checks does a save run?
The name is @, * or a label of letters, digits and dashes. A needs a valid IPv4 address, AAAA an IPv6 one, CNAME and MX a host name, TXT text of up to 255 characters, MX a whole-number priority from 0 to 65535. A CNAME can't share a name with another record or sit on @, other records can't join a CNAME's name, and an identical record is refused. Each reason shows under its field after the first attempt.
What stays local, and how do I wire a real zone?
Records live in state in this tab and nothing is queried or published; a reload brings the ten originals back. In your app send save and remove to your DNS provider's API, repeat the validation on the server, and treat the dependants list as advice rather than a guarantee.