Chain Components

Enhance your applications with our Chain components, featuring a collection of chain icons, names, and symbols. These customizable components simplify the integration of blockchain information, allowing developers to easily display and manage multiple chains in their user interfaces.

View docs Book a Demo

ChainIcon

Show the native icon of a network

import { ChainProvider, ChainIcon } from "thirdweb/react";

function App() {
  return (
    <ChainProvider chain={avalanche}>
      <ChainIcon
        client={THIRDWEB_CLIENT}
        className="h-auto w-20 rounded-full"
        loadingComponent={<span>Loading...</span>}
      />
    </ChainProvider>
  );
}

ChainName

Show the name of the chain

import { ChainProvider, ChainName } from "thirdweb/react";

function App() {
  return (
    <ChainProvider chain={avalanche}>
      <ChainName
        loadingComponent={<span>Loading...</span>}
      />
    </ChainProvider>
  );
}