> ## Documentation Index
> Fetch the complete documentation index at: https://thenile.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Users

> Learn how to use the Nile Auth User component

export const component_0 = "<UserInfo />"

## Overview

The `UserInfo` component displays a user's profile information, including their name, email, and profile picture. It supports fetching user data dynamically if no user is provided initially.

## Installation

Ensure you have the required dependencies installed:

```sh theme={null}
npm install @niledatabase/react @niledatabase/client
```

<Tabs>
  <Tab title="Preview">
    <iframe src="https://storybook.thenile.dev/iframe.html?globals=&id=user-information--user-profile" width="100%" height="300px" className="rounded-xl" />
  </Tab>

  <Tab title="Component">
    ```jsx theme={null}
    import { UserInfo } from '@niledatabase/react';

    export default function ProfilePage() {
      return <UserInfo />;
    }
    ```
  </Tab>
</Tabs>

## Props

| Name                        | Type                              | Description                                                               |
| --------------------------- | --------------------------------- | ------------------------------------------------------------------------- |
| `user`                      | `User \| null \| undefined`       | The user object, if already available.                                    |
| `fetchUrl`                  | `string` *(optional)*             | API endpoint to fetch user data if not provided. Defaults to `"/api/me"`. |
| `profilePicturePlaceholder` | `React.ReactElement` *(optional)* | Placeholder component for the profile picture if the user has none.       |

## User Type

The `User` type includes:

```ts theme={null}
export type User = {
  name?: string;
  givenName?: string;
  familyName?: string;
  email: string;
  emailVerified?: boolean;
  picture?: string;
  created: string;
};
```

## Features

* **Displays user information**: Name, email, profile picture, and account creation date.
* **Email verification badge**: Shows a verification badge if the email is verified.
* **Auto-fetches user data**: If `user` is not provided, it fetches data from `fetchUrl`.
* **Customizable profile picture placeholder**: Supports a fallback element.

## Example with Preloaded User Data

```tsx theme={null}
import { UserInfo } from '@niledatabase/react';

const user = {
  name: 'John Doe',
  email: 'johndoe@example.com',
  emailVerified: true,
  picture: 'https://example.com/avatar.jpg',
  created: '2023-01-01T12:00:00Z',
};

export default function ProfilePage() {
  return <UserInfo user={user} />;
}
```

## Example with Fallback Image

```tsx theme={null}
import UserInfo from '@niledatabase/react';
import { CircleUserRound } from 'lucide-react';

export default function ProfilePage() {
  return (
    <UserInfo
      fetchUrl="/api/me"
      profilePicturePlaceholder={<CircleUserRound size={100} />}
    />
  );
}
```

* If `user` is provided, the component will not make a fetch request.
* Profile pictures are displayed if available; otherwise, a random gradient is used as a placeholder.
* The component ensures proper accessibility by setting the `alt` attribute for images.

## Theming

The <code>{component_0}</code> component is styled using tailwind. It can be customized using the `className` and `buttonText` props,
or using Tailwind CSS theme variables. You can find more details and full examples in the [customization doc](/auth/components/customization).

In addition, the hooks documented for each component can be used if you'd like to use Nile Auth with your own components.
If needed, you can peek at the [source code of the component](https://github.com/niledatabase/nile-js/tree/main/packages/react/src) and use it as a template to create your own component for maximum customization.

## Related Components

* [Sign In](/auth/components/signin)
* [Sign Up](/auth/components/signup)
* [Organization](/auth/components/organization)