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

# User Details

> User Details — CometChat documentation.

`CometChatDetails` is a component that provides additional information and settings related to a specific user.

The details screen includes the following elements and functionalities:

1. User Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
2. User Actions: The details screen provides actions to block/unblock the user.

## Properties

### User

You can view details of this particular user

| Name | Type                                                         | Description                                    |
| ---- | ------------------------------------------------------------ | ---------------------------------------------- |
| user | [CometChat.User](/sdk/javascript/user-management#user-class) | View details of this particular CometChat user |

### Title

Title for the component

| Name  | Type   | Description                    |
| ----- | ------ | ------------------------------ |
| title | string | Heading text for the component |

### Icon URLs

Custom asset URL used for graphical representation

| Name               | Type   | Description                  |
| ------------------ | ------ | ---------------------------- |
| closeButtonIconURL | string | Asset URL for the close icon |

### Disable user presence

Turn off the visibility of a user's online status in the chat

| Name                 | Type    | Description                                                                                               |
| -------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| disableUsersPresence | boolean | When set to true, Users will not be able to see whether a particular user is currently online or offline. |

### Data / Templates

Pre-defined structure to serve as a starting point to create the details component.

| Name | Type                                                    | Description                                                                              |
| ---- | ------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| data | [CometChatDetailsTemplate](/web-shared/detailstemplate) | Data model that serve as a starting point of the details component for a particular user |

### Custom view

UI component created and customised by the developer to meet your design or functional requirements.

| Name              | Type                                                       | Description                                                                                   |
| ----------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| subtitleView      | Function as PropType\<(user?: CometChat.User) => ViewType> | User-defined Vue component to customise the secondary text shown in the default user profile. |
| customProfileView | Function as PropType\<(user?: CometChat.User) => ViewType> | User-defined Vue component to customise user profile view.                                    |

### Toggle profile view

Switch to hide or show the default user profile.

| Name        | Type    | Description                                            |
| ----------- | ------- | ------------------------------------------------------ |
| hideProfile | boolean | When set to true, the user profile view will be hidden |

### Function callbacks

Functions that can be invoked by the user in response to a specific event or condition.

| Name    | Type                                                                 | Description                                                                                   |
| ------- | -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| onClose | Function as PropType\<() => void>                                    | Override the method that is invoked when user clicks on the close icon.                       |
| onError | Function as PropType\<(error: CometChat.CometChatException) => void> | Override the method that is invoked when an error is encountered within the details component |

### Style

Styling properties and values of all the child components

| Name                 | Type                                                   | Description                                                                                      |
| -------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| avatarStyle          | [AvatarStyle](/web-elements/avatar#avatar-style)       | Styling properties and values of the [Avatar](/web-elements/avatar) component                    |
| statusIndicatorStyle | [StatusIndicator](/web-elements/status-indicator)      | Styling properties and values of the [StatusIndicator](/web-elements/status-indicator) component |
| listItemStyle        | [ListItemStyle](/web-elements/list-item#listitemstyle) | Styling properties and values of the [ListItem](/web-elements/list-item) component               |
| detailsStyle         | [DetailsStyle](/web-shared/detailsstyle)               | Styling properties and values of the [Details](/ui-kit/vue/user-details) component               |

## Usage

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    //User with uid=kevin
    const user = new CometChat.User("kevin");
    user.setName("Kevin");

    //Pass the user object to the details component
    <CometChatDetails :user="user"></CometChatDetails>
    ```
  </Tab>
</Tabs>