Ant Design Web3

Ant Design Web3 is a Web3 React component library based on Ant Design, it provides a series of components that can help you quickly build decentralized applications (DApp).

You can use Ant Design Web3 in any of the following ways:

Use UI components directly through @ant-design/web3, such as ConnectButton, Address, etc. You can choose any way you like to connect to the blockchain, such as ether, viem and web3.js. And any other chain's SDK, including non-EVM compatible blockchains, can also use Ant Design Web3 in this way.
Use the adapter provided by us with @ant-design/web3 to quickly connect to various blockchains without having to handle the related logic of connecting to the blockchain yourself.
- Connect to EVM-compatible chains based on @ant-design/web3-wagmi or @ant-design/web3-ethers and @ant-design/web3-eth-web3js.
- Connect to Solana based on @ant-design/web3-solana.
- Connect to Bitcoin based on @ant-design/web3-bitcoin.
- Connect to Sui based on @ant-design/web3-sui.
Implement an adapter yourself to support connecting to more different blockchains, the specific implementation method can refer to Developing Adapters.
Use only the official adapter, such as @ant-design/web3-solana, and then completely customize the UI components, consume the capabilities provided by the adapter through Web3ConfigProvider.

Try it out

Here are examples of using Ant Design Web3 through @ant-design/web3-wagmi:

If you want to try more refined theme control, you can try our Theme Editor, or check out the Theme documentation.

If you want to further try how to use Ant Design Web3 in your own project, or want to create a project based on Ant Design Web3 from 0, you can continue reading Quick Start, wish you a pleasant surfing in Web3! 🌊🌊🌊

Why use it?

Why use Ant Design Web3?

🎨 Provides high-quality UI components based on Ant Design. Ant Design is a high-quality UI basic component set that supports flexible theme customization and has nearly 100,000 GitHub stars and many users, which gives Ant Design Web3 a basic quality guarantee.
📦 Out-of-the-box experience, not only provides ConnectModal for connecting wallets, but also Address, NFTCard and other components, continuously iterates to cover the needs you may encounter in DApp development, bringing the R&D experience of Web2 to Web3. We also pay attention to user experience and bring the user experience of Web2 to Web3.
🔌 Flexible and reliable architecture design, UI layer and adapter layer are separated, which makes it possible to support different blockchains and different chain SDKs, and also allows components to be continuously and stably iterated and upgraded.

There are more features:

Feature	Supported
Theme customization	✅
Internationalization	✅
100% test coverage	✅
TypeScript support	✅
Responsive design	✅
Quick and easy wallet connection component	✅
NFT component	✅
More practical components such as Address	✅
Rich icon library	✅
Support EIP6963	✅
Support WalletConnect	✅
Support Ethereum and its L2	✅
Support Bitcoin	✅
Support Solana	✅
Support TON	✅
Adapt to more non-EVM chains	✅
Course	✅
Use with wagmi	✅
Use with ethers	✅
Use with web3.js	✅
Use with umi	✅
Use with Next.js	✅
Use with Remix	✅
Use with Tailwind CSS	✅

Ant Design Web3

Ant Design Web3 is a Web3 React component library based on Ant Design, it provides a series of components that can help you quickly build decentralized applications (DApp).

You can use Ant Design Web3 in any of the following ways:

Use UI components directly through @ant-design/web3, such as ConnectButton, Address, etc. You can choose any way you like to connect to the blockchain, such as ether, viem and web3.js. And any other chain's SDK, including non-EVM compatible blockchains, can also use Ant Design Web3 in this way.

Use the adapter provided by us with @ant-design/web3 to quickly connect to various blockchains without having to handle the related logic of connecting to the blockchain yourself.

Connect to EVM-compatible chains based on @ant-design/web3-wagmi or @ant-design/web3-ethers and @ant-design/web3-eth-web3js.
Connect to Solana based on @ant-design/web3-solana.
Connect to Bitcoin based on @ant-design/web3-bitcoin.
Connect to Sui based on @ant-design/web3-sui.

Implement an adapter yourself to support connecting to more different blockchains, the specific implementation method can refer to Developing Adapters.

Use only the official adapter, such as @ant-design/web3-solana, and then completely customize the UI components, consume the capabilities provided by the adapter through Web3ConfigProvider.

Why use it?

Why use Ant Design Web3?

🎨 Provides high-quality UI components based on Ant Design. Ant Design is a high-quality UI basic component set that supports flexible theme customization and has nearly 100,000 GitHub stars and many users, which gives Ant Design Web3 a basic quality guarantee.

📦 Out-of-the-box experience, not only provides ConnectModal for connecting wallets, but also Address, NFTCard and other components, continuously iterates to cover the needs you may encounter in DApp development, bringing the R&D experience of Web2 to Web3. We also pay attention to user experience and bring the user experience of Web2 to Web3.

🔌 Flexible and reliable architecture design, UI layer and adapter layer are separated, which makes it possible to support different blockchains and different chain SDKs, and also allows components to be continuously and stably iterated and upgraded.

There are more features:

Feature	Supported
Theme customization	✅
Internationalization	✅
100% test coverage	✅
TypeScript support	✅
Responsive design	✅
Quick and easy wallet connection component	✅
NFT component	✅
More practical components such as Address	✅
Rich icon library	✅
Support EIP6963	✅
Support WalletConnect	✅
Support Ethereum and its L2	✅
Support Bitcoin	✅
Support Solana	✅
Support TON	✅
Adapt to more non-EVM chains	✅
Course	✅
Use with wagmi	✅
Use with ethers	✅
Use with web3.js	✅
Use with umi	✅
Use with Next.js	✅
Use with Remix	✅
Use with Tailwind CSS	✅