shadcn.io is not affiliated with official shadcn/ui
DNS Records Table Block for Solid
A DNS records table whose closing form checks the value against the record type, an IPv4 address for A, a host for CNAME, a priority and host for MX, with a live message, Propagating status for new records, and Undo after Delete.
Installation
Overview
Check a DNS record against its type before it is added, with this DNS records table for Solid with Ark UI. The table lists the records of a domain at a DNS host: type, name, value in mono, a TTL that reads 5 min, 1 h or 1 day, and a status. The closing band is the form: a Type Native Select (A, AAAA, CNAME, MX, TXT) changes the hint under the Value field and what it accepts, an IPv4 address for A, an IPv6 address for AAAA, a host name for CNAME, a priority and a host for MX and any text for TXT, and while you type the line under the field says what is wrong or that it looks right. A refused Add record focuses the first problem; a good one goes to the top of the list marked Propagating. Delete takes a record out and an Undo line under the list puts it back, and the list sits in a frame that keeps its height, with an empty state when every record is gone. It's built from Native Select, Input, Field, Shine Button, Badge and Guides. For DNS hosts, domain panels and any form that validates by type.
FAQ
How does the Value validation work?
fitsType holds one small check per type: four dotted numbers from 0 to 255 for A, hex groups with colons for AAAA, a dotted host name for CNAME, a priority up to 65535 and a host for MX, and any non-empty text for TXT. TYPES holds each type's hint, placeholder and the sentence a refusal uses, so adding a type is one entry and one check. These are format checks, not lookups.
When does the message appear?
While you type, as soon as the field has text: the hint turns into what is wrong, with an icon in the destructive colour and the words in foreground, or into "Looks right for A." An empty field only complains after an Add record press. The line has a reserved slot, so the form never changes height, and it is the field's description for screen readers.
How do Delete and Undo work?
Delete removes the row and keeps it with its position; the band under the list names it and offers Undo, which puts it back where it was and moves focus to the Name field. Focus goes to Undo when you delete. When the last record goes the frame shows an empty state instead of collapsing.
Is it accessible?
Every field has a visible label, the delete buttons are named by their record ("Delete A record www"), status is a word with a dot, and one polite line reports each add, delete and refusal. The mono values are left-to-right even in a right-to-left page.
How does it look on a phone?
The Type, TTL and Status columns fold into the name's cell, the value truncates with its full text as a tooltip, and the form stacks with Type and Name side by side, then Value, then TTL and the full-width Add record button.
What stays local, and how do I wire it for real?
The eight records are typed in the file; adding and deleting change this page's state, and "Propagating" never turns to Active because nothing is published. In your app send the record from add, poll or subscribe for its propagation and flip the status when your DNS provider confirms it.