Powered by

A design system from Family

Avatar

Change the avatar used in ConnectKit to more closely match the look and feel of your app.

By default ConnectKit has an avatar component that generates a random gradient based on the users wallet address in case their ENS image is not set. You can customize this by providing your own avatar component.

Example

First import Types, then create a custom avatar component:

,
MyCustomAvatar.tsx
1import { Types } from "connectkit";
2
3const MyCustomAvatar = ({ address, ensImage, ensName, size, radius }: Types.CustomAvatarProps) => {
4 return (
5 <div
6 style={{
7 overflow: "hidden",
8 borderRadius: radius,
9 height: size,
10 width: size,
11 background: generateColorFromAddress(address), // your function here
12 }}
13 >
14 {ensImage && <img src={ensImage} alt={ensName ?? address} width="100%" height="100%" />}
15 </div>
16 );
17};
18
19export default MyCustomAvatar;

Then apply your avatar component to the <ConnectKitProvider> via the customAvatar option:

,
_app.tsx
1import MyCustomAvatar from "./MyCustomAvatar";
2
3const App = () => {
4 return (
5 <WagmiConfig client={client}>
6 <ConnectKitProvider
7 options={{
8 customAvatar: MyCustomAvatar,
9 }}
10 >
11 {/* Your App */}
12 </ConnectKitProvider>
13 </WagmiConfig>
14 );
15};

That's it—you will now have replaced all usage of the <Avatar /> component used within ConnectKit.

On this page