Overview

@thenamespace/ens-components is a React library of complete ENS flows. Each form handles input, validation, pricing, wallet prompts, and the success screen, so you add a flow by rendering one component. The forms read the wallet from wagmi and send transactions with viem. The current major version is 3. Onchain flows run on ENSv2 by default, on Ethereum mainnet or Sepolia.

Choose a component

You want to	Use	Page
Register a `.eth` name	`EnsNameRegistrationForm`	Register names
Renew a `.eth` name	`NameRenewForm`	Renew names
Edit records on a name the user owns	`EnsRecordsForm`	Edit records
Collect records in your own flow, without a transaction	`SelectRecordsForm`	Edit records
Mint an onchain subname	`SubnameMintForm`	Mint subnames
Renew an onchain subname	`SubnameRenewForm`	Renew subnames
Create or update a gasless offchain subname	`OffchainSubnameForm`	Offchain subnames
Show progress for your own transaction	`TransactionProgress`, `TransactionModal`	Transaction progress

The package also exports hooks and ENSv2 helpers for custom flows. See Hooks and helpers.

Quick example

After you install the package and set up providers, render a form:

'use client';

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

export function RegisterName() {
  return (
    <EnsNameRegistrationForm
      onRegistrationSuccess={(result) => {
        console.log(`Registered until ${result.expiryDate}`);
      }}
    />
  );
}

How ENSv2 works in the forms

These rules apply to registration, renewal, subname minting, and subname renewal.

Networks: Ethereum mainnet by default, or Sepolia when you pass isTestnet.
Payment: .eth registration and renewal, and subname mints and renewals, are paid in USDC or DAI. The user picks the token inside the form. Network fees are always paid in ETH.
Wallet prompts: Wallets that support EIP-5792 atomic batching confirm each step in one prompt. Other wallets get one prompt per call, for example a token approval before the payment. The forms handle approvals, so don’t add your own.
Balances: When the wallet holds too little of the chosen token, or too little ETH for gas, the form shows “Insufficient funds” and blocks the transaction.

The one ENSv1 flow still in use is minting under a parent on an old Namespace listing. Pass version={1} to SubnameMintForm for those parents. See Mint under an old Namespace listing.

Resources

Try every component live on enscomponents.com.
Read the source on GitHub.
Give an AI agent the ENS Components skill, or point it at Skill.md.
Upgrading from 2.x? Follow Upgrade to the latest version.
Review every release in the ENS Components changelog.

Start building

AI tooling

How to guides

Starter kits

Reference

Troubleshooting

Choose a component

Quick example

How ENSv2 works in the forms

Resources

​Choose a component

​Quick example

​How ENSv2 works in the forms

​Resources

Choose a component

Quick example

How ENSv2 works in the forms

Resources