<Identity /> · OnchainKit

Identity components & utilities

Identity is a React context provider and arranges identity components.

Usage

Show user avatar, name with attestation and address:

import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity';

<Identity
  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
>
  <Avatar />
  <Name>
    <Badge />
  </Name>
  <Address />
</Identity>

Badge with Tooltip

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

import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity';

<Identity
  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
>
  <Avatar />
  <Name> 
    <Badge 
      tooltip={true}
    />
  </Name>
  <Address />
</Identity>

You can also provide custom tooltip text:

// @errors: 2304 2552
import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity';

<Identity
  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
>
  <Avatar />
  <Name>
    <Badge 
      tooltip="Coinbase Verified Account"
    />
  </Name>
  <Address />
</Identity>

Modify any styles with className prop.

// @errors: 2304 2552 2657
import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity';

<Identity
  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
>
  <Avatar>
    <Badge
      className="bg-error"
    />
  </Avatar>
  <Name
    className="text-orange-600"
  />
  <Address
    className="text-zinc-500 font-bold"
  />
</Identity>

Choose which identity components to render:

import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity';
// ---cut-start---
<div>
// ---cut-end---

<Identity address="0x838..." schemaId="0xf8b...">
  <Avatar />
  <Name>
    <Badge />
  </Name>
</Identity>

<Identity address="0x838..." schemaId="0xf8b...">
  <Name>
    <Badge />
  </Name>
  <Address />
</Identity>
// ---cut-after---
</div>

Props

IdentityReact