# component
The `` component renders the authenticated user's avatar on its own, a common UI element found across many websites and applications.
## Example
The following example includes a basic implementation of the `` component mounted in a header. When the user is signed in, they will see their avatar. You can use this as a starting point for your own implementation.
**App Router**
filename: layout.tsx
```tsx
import { ClerkProvider, Show, SignInButton, UserAvatar } from '@clerk/nextjs'
function Header() {
return (
)
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
**Pages Router**
filename: pages/\_app.tsx
```tsx
import { ClerkProvider, Show, SignInButton, UserAvatar } from '@clerk/nextjs'
import type { AppProps } from 'next/app'
function Header() {
return (
)
}
function MyApp({ pageProps, Component }: AppProps) {
return (
)
}
export default MyApp
```
## Properties
The `` component accepts the following properties, all of which are **optional**:
| Name | Type | Description |
| ----------- | ----------------------- | --------------------------------------------------------------------------------------------------- |
| rounded? | boolean | Determines whether the user avatar is displayed with rounded corners. |
| appearance? | Appearance | undefined | An object to style your components. Will only affect Clerk components and not Account Portal pages. |
| fallback? | ReactNode | An element to be rendered while the component is mounting. |
## Customization
To learn about how to customize Clerk components, see the [customization documentation](https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/overview.md).
---
## Sitemap
[Overview of all docs pages](https://clerk.com/docs/llms.txt)