DocsComponentsProfile Card

Profile Card

The Profile Card component displays a user’s ENS and EFP details like:

  • Primary List Number (EFP List)
  • Avatar
  • Header Image
  • Name
  • Description (Bio)
  • Links
  • Socials
  • Followers
  • Following
  • Common Followers

Add to your project

import { ProfileCard } from 'ethereum-identity-kit'
 
export default function Home() {
  return <ProfileCard addressOrName="vitalik.eth" />
}
Try it out! - https://playground.ethidentitykit.com/?path=/docs/organisms-profile-card--component-docs
Following
Followers

Parameters

ParameterDescriptionRequiredDefault Value
addressOrNameEthereum Address or ENS name to fetch profile data for.Yes-
listSearch profile data by list number; overrides addressOrName if provided.No-
connectedAddressAddress of the user connected to the app.No-
darkModeEnables dark mode styling for the profile card.Nofalse
showFollowerStateShows follower state tag (e.g., follows you, blocks you, mutes you).No-
showFollowButtonShows the follow button in the profile card.Notrue
showEmptySocialsShows empty socials in the profile card.Notrue
onStatClickAction to perform when a stat is clicked; defaults to navigating to EFP profile with selected stat.NodefaultOnStatClick
hasCommonFollowersModalWhether to show the common followers modal.Notrue
extraOptionsAdditional options for profile data and functionality. See ProfileExtraOptions type for details:No-
- customFollowButton: React node for a custom follow button.
- nameMenu: React node for a name menu.
prefetchedPrefetched data for improved performance. Object with nested structure:No-
- profile: { data, isLoading, refetch } - Profile data with loading state
- stats: { data, isLoading, refetch } - Stats data with loading state
classNameAdditional CSS class names to apply to the component.No-
styleInline CSS styles to apply to the component.No-
propsAdditional props for the <div> element.No-
⚠️

When using the prefetched prop, ensure that all required data is provided. The new nested structure provides better type safety and organization compared to the previous flat prop structure.

The component uses predefined styles and can be further customized using the className prop. The appearance can be manually toggled between light and dark modes using the darkMode prop, however, if you have a dark class applied in your application, the component will automatically use that.