Skip to main content
Docs

<UserAvatar /> component

The <UserAvatar /> component renders the authenticated user's avatar on its own, a common UI element found across many websites and applications.

The <UserAvatar /> component renders the authenticated user's avatar on its own, a common UI element found across many websites and applications.

Example

In the following example, <UserAvatar /> is mounted inside a header component, which is a common pattern on many websites and applications. When the user is signed in, they will see their avatar.

src/layouts/root-layout.tsx
import { SignedIn, UserAvatar, SignInButton, SignedOut } from '@clerk/chrome-extension'

export default function Header() {
  return (
    <header>
      <SignedIn>
        <UserAvatar />
      </SignedIn>
      <SignedOut>
        <SignInButton />
      </SignedOut>
    </header>
  )
}

Properties

The <UserAvatar /> component accepts the following properties, all of which are optional:

  • Name
    rounded
    Type
    boolean
    Description

    Determines whether the user avatar is displayed with rounded corners.

  • Name
    appearance
    Type
    Appearance | undefined
    Description

    Optional object to style your components. Will only affect Clerk components and not Account Portal pages.

Customization

To learn about how to customize Clerk components, see the customization documentation.

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on