## DNS Records (S—383)

Manage DNS for a domain: records as rows, an add form that validates per type, new records go from pending to live.

- URL: https://sundaeui.dev/components/dns-records
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/dns-records.json`
- Tags: admin, records, settings, dns, domain, hosting

A, AAAA, CNAME, MX and TXT records each validate their value: IPv4 and IPv6 addresses, hostnames, and an MX priority. Errors appear under the field.
New records show Pending while they propagate, then Live. Records can be deleted with an inline confirm.

### Usage

```tsx
import { DnsRecords } from '@/components/sundae/dns-records'

<DnsRecords />
```

### Props

- `domain` (`string`, default `'sundae.dev'`): Zone name.
- `records` (`{ type: string; name: string; value: string; ttl: number }[]`, required): Starting records.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Hosting dashboards, domain settings, onboarding to custom domains.

### When not to use

- Bulk zone editing: use a zone file import.

### Accessibility

- The add form uses labelled fields and describes errors with aria-describedby.
- Status changes are announced.
- Reduced motion removes the movement and keeps every state change.