The IdentityCard component provides a comprehensive way to display user identity information, including ENS names, avatars, and chain-specific name resolution.

​
Features

  • Name Resolution: Resolves both Basenames and ENS names automatically
  • Avatar Support: Displays ENS and chain-specific avatars
  • Flexible Display: Customizable layout and styling options
  • Chain-Aware: Works across different EVM chains that support name resolution
  • Tooltip Support: Displays attestation information on badge hover

​
Usage

​
Basic Usage

// @errors: 2305
import { IdentityCard } from '@coinbase/onchainkit/identity'; 
import { base } from 'viem/chains';

<IdentityCard
  address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
  chain={base}
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
/>

​
Badge Tooltip

You can enable a tooltip for the attestation badge to provide context about what the badge represents:

// @noErrors: 2305 2657
import { IdentityCard } from '@coinbase/onchainkit/identity';
import { base } from 'viem/chains';

<IdentityCard 
  address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
  chain={base}
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
  badgeTooltip={true}
/>

You can also provide custom tooltip text:

// @noErrors: 2305 2657
import { IdentityCard } from '@coinbase/onchainkit/identity';
import { base } from 'viem/chains';

<IdentityCard 
  address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
  chain={base}
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
  badgeTooltip="Coinbase Verified"
/>

​
Customization

You can override styles using className or by setting a custom OnchainKit theme. You can also set the mainnet chain for ENS name resolution:

import { IdentityCard } from '@coinbase/onchainkit/identity';
import { mainnet } from 'viem/chains'; 

<OnchainKitProvider
  config={{
    appearance: {
      mode: 'auto',
      theme: 'cyberpunk', 
    },
  }}
>
</OnchainKitProvider>

<IdentityCard 
  address="0x123..."
  chain={mainnet}
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
/>

​
Props

IdentityCardReact

PropTypeDescription
addressstringThe wallet address to display identity for
chainChainThe chain to resolve the identity on
classNamestringAdditional CSS classes to apply
schemaIdAddress | nullThe schema ID for attestation
badgeTooltipboolean | stringWhen true, displays the attestation name in tooltip. When a string is provided, shows that custom text instead. Defaults to false

​
Error Handling

The component handles various error states gracefully:

  • Invalid addresses display a shortened address format
  • Missing ENS names fallback to shortened addresses
  • Failed avatar fetches show a default avatar
  • Network errors maintain a degraded but functional display

​
Best Practices

  1. Always provide a valid chain object from viem/chains
  2. Handle loading states in parent components when address might be undefined
  3. Implement proper error boundaries in parent components
  4. Consider mobile responsiveness when styling
  5. Use badgeTooltip to provide context about what the verification badge represents