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" />
}
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 card. | No | false |
showFollowerState | Shows follower state tag (e.g., follows you, blocks you, mutes you). | No | - |
showFollowButton | Shows the follow button in the profile card. | No | true |
showEmptySocials | Shows empty socials in the profile card. | No | true |
onStatClick | Action to perform when a stat is clicked; defaults to navigating to EFP profile with selected stat. | No | defaultOnStatClick |
hasCommonFollowersModal | Whether to show the common followers modal. | No | true |
extraOptions | Additional 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. | |||
prefetched | Prefetched 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 | |||
className | Additional CSS class names to apply to the component. | No | - |
style | Inline CSS styles to apply to the component. | No | - |
props | Additional 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.