> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# QuickView

> QuickView — CometChat documentation.

CometChat's Quick View component allows you to create a quick overview panel with a title, subtitle, and an optional close button. It extends from the LitElement's base class.

## Attributes

| Name           | Type                                                                | Description                                                                      |
| -------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| title          | string                                                              | The title for the Quick View.                                                    |
| subtitle       | string                                                              | The subtitle for the Quick View.                                                 |
| closeIconURL   | string                                                              | The URL for the close icon. If not provided, a default close icon will be used.  |
| hideCloseIcon  | boolean                                                             | A boolean to determine whether to hide the close icon. By default, it is `true`. |
| quickViewStyle | [QuickViewStyle](/web-elements/cometchat-quick-view#quickviewstyle) | An instance of `QuickViewStyle` class to style the Quick View.                   |

## QuickViewStyle

You can pass an instance of the `QuickViewStyle` class to the `quickViewStyle` attribute to customize the appearance of the Quick View. The `QuickViewStyle` class is derived from the `BaseStyle` class

| Name            | Description                   |
| --------------- | ----------------------------- |
| titleFont       | The font of the title.        |
| titleColor      | The color of the title.       |
| subtitleFont    | The font of the subtitle.     |
| subtitleColor   | The color of the subtitle.    |
| closeIconTint   | The color of the close icon.  |
| leadingBarTint  | The color of the leading bar. |
| leadingBarWidth | The width of the leading bar. |

## Events

| Name             | Description                                                |
| ---------------- | ---------------------------------------------------------- |
| cc-close-clicked | This event is dispatched when the close button is clicked. |

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import React from 'react';
    import '@cometchat/uikit-elements'; //import the web component package.
    import { QuickViewStyle } from '@cometchat/uikit-elements'

    function App() {
      // Define the styles
      const quickViewStyle = new QuickViewStyle({
        height: "500px",
        width: "300px",
        background: "blue",
        titleFont: '600 13px Inter, sans-serif',
        titleColor: 'white',
        subtitleFont: '400 13px Inter, sans-serif',
        subtitleColor: 'lightgrey',
        closeIconTint: 'white',
        leadingBarTint: 'white',
        leadingBarWidth: '4px',
      });

      // Define the event handler
      const handleQuickViewClose = () => {
        console.log('Close button clicked');
      }

      return (
        <div className="App">
          <cometchat-quick-view 
            title="My Title" 
            subtitle="My Subtitle" 
            hideCloseIcon="false"
            quickViewStyle=${quickViewStyle}
            @cc-close-clicked=${handleQuickViewClose}
          ></cometchat-quick-view>
        </div>
      );
    }

    export default App;
    ```
  </Tab>
</Tabs>