# User

The `User` component displays the current user's name and avatar. If the user belongs to more than one account, they can switch accounts here. It also provides options to change the language, toggle dark mode, and sign out.

It's rendered within the header component and appears at the top right-hand corner of the viewport. 

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2F3uNrJ6hUtwrON5GXpIWg%2Fuser.png?alt=media&#x26;token=8cdaa368-ecf0-4f1f-9ac2-a412ff47e17e" alt="Gravity user component" width="334"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { User } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <div>
      <User />
    </div>
  );
}
```

### Props

This component does not accept any props directly as it uses context for its functionality.

### User Avatars

Users can upload an avatar in the `/account/profile` view, and it will be [uploaded to your S3 bucket](https://docs.usegravity.app/gravity-server/file-uploads) in a folder called `avatars` and displayed in the `User` component.&#x20;

You can change the folder and size of the photos inside the [config](https://docs.usegravity.app/gravity-server/config) file in the `avatar` section.

Users signed in via a social network will display the profile picture from that network unless they overwrite it by uploading a photo.&#x20;

### Notes

* The `User` component relies on `AuthContext` and `ViewContext` for authentication and view management.
* The `DropdownMenu` component is used to display the user options.