<UserAvatar /> component
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.
---
import { SignedIn, UserAvatar, SignInButton, SignedOut } from '@clerk/astro/components'
---
<SignedIn>
<UserAvatar />
</SignedIn>
<SignedOut>
<SignInButton />
</SignedOut>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
Last updated on