Skip to content
Docs

<IdentityCard />

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

Usage

Basic Usage

import { IdentityCard } from '@coinbase/onchainkit/identity'; 
import { base } from 'viem/chains';
 
<IdentityCard
  address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF"
  chain={base}
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
/>

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:

// @errors: 2305 2724 2304 2657
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

The IdentityCard component accepts the following props:

PropTypeDescription
addressstringThe wallet address to display identity for
chainChainThe chain to resolve the identity on
classNamestringAdditional CSS classes to apply

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

Related Components