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.

layout.tsx
import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserAvatar } from '@clerk/nextjs'

function Header() {
  return (
    <header style={{ display: 'flex', justifyContent: 'space-between', padding: 20 }}>
      <h1>My App</h1>
      <SignedIn>
        <UserAvatar />
      </SignedIn>
      <SignedOut>
        <SignInButton />
      </SignedOut>
    </header>
  )
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <ClerkProvider>
        <Header />
        {children}
      </ClerkProvider>
    </html>
  )
}
pages/_app.tsx
import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserAvatar } from '@clerk/nextjs'
import type { AppProps } from 'next/app'

function Header() {
  return (
    <header style={{ display: 'flex', justifyContent: 'space-between', padding: 20 }}>
      <h1>My App</h1>
      <SignedIn>
        <UserAvatar />
      </SignedIn>
      <SignedOut>
        <SignInButton />
      </SignedOut>
    </header>
  )
}

function MyApp({ pageProps, Component }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <Header />
      <Component {...pageProps} />
    </ClerkProvider>
  )
}

export default MyApp

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.

  • Name
    fallback?
    Type
    ReactNode
    Description

    Optional element to be rendered while the component is mounting.

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