Skip to content

<Identity />

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"
> // [!code focus]
  <Avatar /> // [!code focus]
  <Name> // [!code focus]
    <Badge /> // [!code focus]
  </Name> // [!code focus]
  <Address /> // [!code focus]
</Identity> 

Modify any styles with className prop.

import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity';
 
<Identity
  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
>
  <Avatar>
    <Badge className="bg-error" /> // [!code focus]
  </Avatar>
  <Name className="text-orange-600" /> // [!code focus]
  <Address className="text-gray-500 font-bold"/> // [!code focus]
</Identity>

Choose which identity components to render:

import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity';
 
<Identity address="0x838..." schemaId="0xf8b...">
  <Avatar /> // [!code focus]
  <Name> // [!code focus]
    <Badge /> // [!code focus]
  </Name> // [!code focus]
</Identity>
 
<Identity address="0x838..." schemaId="0xf8b...">
  <Name> // [!code focus]
    <Badge /> // [!code focus]
  </Name> // [!code focus]
  <Address /> // [!code focus]
</Identity>
 

Props

IdentityReact