User Profile

The User Profile component displays a comprehensive Ethereum Profile with ENS and EFP details like:

Avatar and Header Image
Name and Status
Role (if provided)
Description (Bio)
Follower State (follows you, blocks you, mutes you)
Profile Statistics (Followers, Following)
Common Followers
Social Media Links
POAP Badges

Add to your project

import { UserProfile } from 'ethereum-identity-kit'
 
export default function Home() {
  return <UserProfile addressOrName="cottons.eth" />
}

Try it out! - https://playground.ethidentitykit.com/?path=/docs/organisms-user-profile--component-docs

Following

Followers

Parameters

Parameter	Description	Required	Default Value
`addressOrName`	Ethereum Address or ENS name to fetch profile data for.	Yes	-
`list`	Search profile data by list number; overrides `addressOrName` if provided.	No	-
`connectedAddress`	Address of the user connected to the app.	No	-
`darkMode`	Enables dark mode styling for the profile.	No	false
`role`	Additional information to display on the profile (used for roles on ethid.org).	No	-
`showFollowerState`	Shows follower state tag (follows you, blocks you, mutes you).	No	false
`onStatClick`	Action to perform when a stat is clicked; defaults to navigating to EFP profile with selected stat.	No	-
`selectedList`	List number selected in your application for the connected user.	No	-
`onProfileClick`	Action to perform when the profile is clicked.	No	-
`showPoaps`	Shows EFP related POAPs on the profile.	No	true
`alignProfileContent`	Aligns the profile content when max-width is surpassed (center, start, end).	No	’center’
`options`	Additional options for profile data and functionality. See `ProfileCardOption` type for details:	No	-
	- `followButton`: React node for a follow button.
	- `nameMenu`: React node for a name menu.
	- `profileData`: Prefetched profile data.
	- `prefetchedProfileLoading`: Loading state for prefetched profile data.
	- `refetchProfileData`: Function to refetch profile data.
	- `statsData`: Prefetched stats data.
	- `openListSettings`: Function to open list settings modal.
`className`	Additional CSS class names to apply to the component.	No	-
`style`	Inline CSS styles to apply to the component.	No	-

Styling

The component uses predefined styles and can be customized using the className and style props. The appearance can be manually toggled between light and dark modes using the darkMode prop. The component also supports responsive design with different layouts for desktop and mobile views.

Installation Profile Card