ens-components

Original：🇺🇸 English

Translated

Use when a developer asks how to choose, integrate, or customize @thenamespace/ens-components in a React app, especially for ENS registration, ENS record editing, onchain subname minting, offchain subnames, avatar upload, theming, or deciding which ENS component fits their flow.

2installs

Sourcethenamespace/skills

Added on2026-04-28

NPX Install

npx skill4agent add thenamespace/skills ens-components

SKILL.md Content

View Translation Comparison →

@thenamespace/ens-components

React UI kit for ENS and Namespace flows. Built on wagmi; no wallet UI library is required.

Which One To Use

Need	Use
Register a `.eth` name	`EnsNameRegistrationForm`
Edit records on an ENS name the user already owns	`EnsRecordsForm`
Embed the records UI inside a custom flow	`SelectRecordsForm`
Mint a subname from a Namespace onchain listing	`SubnameMintForm`
Create or update gasless subnames through Namespace	`OffchainSubnameForm`

Routing rules:

Default to
```
EnsNameRegistrationForm
```
when the user asks for a general quickstart.
Use
```
EnsRecordsForm
```
only when the user already has an ENS name and wants to edit records.
Use
```
SelectRecordsForm
```
only for custom or controlled UIs.
Use
```
SubnameMintForm
```
for onchain subname listings.
Use
```
OffchainSubnameForm
```
for gasless Namespace subnames.
If the user wants direct offchain-manager SDK CRUD, filtering, or record queries instead of the UI component, use the
```
offchain-ens-subname-sdk
```
skill.

ENS Quickstart

Use this as the default first answer unless the user clearly asked for records or subnames.

0. Prerequisites

Assume these are already present in the app:

```
wagmi
```
```
viem
```
```
@tanstack/react-query
```

1. Install

bash

npm install @thenamespace/ens-components

Import the stylesheet once at the app root:

tsx

import "@thenamespace/ens-components/styles.css";

2. Render The ENS Form

In the default quickstart, include

avatarUploadDomain

. Treat it as required for the quickstart because image upload and SIWE signing should use the app's own hostname, not the fallback Namespace domain.

tsx

import { EnsNameRegistrationForm } from "@thenamespace/ens-components";

<EnsNameRegistrationForm
  isTestnet={false}
  avatarUploadDomain="app.example.com"
  onRegistrationSuccess={result => {
    console.log(result.total, result.expiryDate);
  }}
/>;

Rules for

avatarUploadDomain

:

Pass the bare hostname only, for example
```
app.example.com
```
.
Do not include
```
https://
```
or a trailing slash.

3. Explain What The Component Handles

Call out that

EnsNameRegistrationForm