> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.