Privy provides a UserPill component to easily embed in your application. Users can login or connect their wallet from the user pill. Once authenticated, users can interact with the pill to quickly view their account information and use their wallets.images/Userpill2.png

​
Usage

To use the user pill component, import from the @privy-io/react-auth package:
import {UserPill} from '@privy-io/react-auth/ui';
Then, embed the user pill within any component wrapped by your PrivyProvider:
import {UserPill} from '@privy-io/react-auth/ui';

function Page() {
  return (
    <div>
      <h1>Dashboard</h1>
      ...
      <UserPill />
      ...
    </div>
  );
}
You can also customize the user pill by passing the props describing the desired action, label, and size for the component. See more on these props below.
import {UserPill} from '@privy-io/react-auth/ui';

const logoImageElement = (
  <Image
    className="h-8 w-8 rounded-full"
    src="/images/logo.png"
    alt="logo placeholder"
    height={32}
    width={32}
  />
);

function Page() {
  return (
    <div>
      <h1>Dashboard</h1>
      ...
      <UserPill
        action={{type: 'login', options: {loginMethods: ['email']}}}
        label={logoImageElement}
        size={32}
      />
      ...
    </div>
  );
}
The UserPill component relies on some base CSS styles to render properly. If you notice styling issues with the component, you can add these foundational styles to your application:
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
}

button {
  background-color: transparent;
}

​
Customizing via props

Privy allows you to easily customize the user pill within your app by passing action, label, and/or size props on the component.
PropTypeDescription
See belowThe action users take from the user pill.
The size (in pixels) of the pill button.

​
Action prop

The action prop describes the action the user can take from the UserPill component. This prop is an object with a type and options field.You can set the type to:
  • 'connectWallet' to guide the user to connect their wallet. If type: 'connectWallet' is set, you may set options: {suggestedAddress?: string} to suggest a specific address for the user to connect.
  • 'login' to guide the user to login to your application with any of your configured login methods. If type: 'login' is set, you may set options to an object containing loginMethods and/or prefill. The loginMethods field contains an array of the login methods to use in the pill and the prefill field contains an email address or phone number to prefill into the Privy login modal.
Concretely, this type looks like
type Action =
  | {
      type: 'login';
      // Prompt the user to login
      options?: {
        loginMethods?: [string];
        prefill?: {
          type: 'email' | 'phone';
          value: string;
        };
      };
    }
  | {
      type: 'connectWallet';
      // Prompt the user to connect their wallet
      options?: {suggestedAddress?: string};
    };