> ## 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.

# Quickstart

> Get started with CometChat UIKit for Angular in minutes

Follow these steps to integrate CometChat UIKit into your Angular application.

## Prerequisites

* Node.js 18 or higher
* Angular 18, 19, 20, 21, or 22
* A CometChat account with App ID and Auth Key

<Note>
  Angular 22 requires a minimum Node.js version of 24.
</Note>

## Step 1: Install the Package

```bash theme={null}
npm install @cometchat/chat-uikit-angular
```

<Warning>
  `@cometchat/chat-sdk-javascript` and `dompurify` are required peer dependencies. npm may install them automatically alongside the UIKit, but this is not guaranteed — it depends on your npm version and whether there are version conflicts. If you see errors related to missing `CometChat` or `DOMPurify` at runtime, install them explicitly:

  ```bash theme={null}
  npm install @cometchat/chat-sdk-javascript dompurify
  ```
</Warning>

## Step 2: Import Styles

Add the CSS variables to your `angular.json`:

```json expandable theme={null}
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css"
            ]
          }
        }
      }
    }
  }
}
```

Or import in your global `styles.css`:

```css theme={null}
@import '@cometchat/chat-uikit-angular/styles/css-variables.css';
```

<Tip>
  If the `@import` doesn't resolve, use the full `node_modules` path instead:

  ```css theme={null}
  @import 'node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css';
  ```
</Tip>

## Step 3: Register UIKit Assets

The UIKit ships icons, images, and audio files that Angular's build system won't serve automatically. Add the assets path to your `angular.json` so they are copied to the output:

```json expandable theme={null}
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/@cometchat/chat-uikit-angular/src/lib/assets",
                "output": "assets"
              }
            ]
          }
        }
      }
    }
  }
}
```

<Warning>
  Skipping this step will cause all UIKit icons, empty-state images, and notification sounds to fail with 404 errors.
</Warning>

## Step 4: Initialize CometChat

Initialize CometChat in `main.ts` before bootstrapping the Angular app, using `UIKitSettingsBuilder`:

```typescript expandable theme={null}
import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';

const uiKitSettings = new UIKitSettingsBuilder()
  .setAppId('YOUR_APP_ID')
  .setRegion('YOUR_REGION')
  .setAuthKey('YOUR_AUTH_KEY')
  .subscribePresenceForAllUsers()
  .build();

CometChatUIKit.init(uiKitSettings)
  .then(() => {
    console.log('CometChat UIKit initialized successfully');
  })
  .catch((error) => {
    console.error('CometChat UIKit initialization failed:', error);
  });
```

<Info>
  To enable voice and video calling, install `@cometchat/calls-sdk-javascript` and add `.setCallingEnabled(true)` to the builder. Without this, call buttons are hidden across all components. See [Call Features](/ui-kit/angular/call-features) for details.
</Info>

## Step 5: Login a User

```typescript theme={null}
CometChatUIKit.login('USER_ID')
  .then((user) => {
    console.log('User logged in:', user);
  })
  .catch((error) => {
    console.error('Login failed:', error);
  });
```

## Step 6: Add a Component

Add the conversations component to your template:

```html theme={null}
<cometchat-conversations></cometchat-conversations>
```

<Note>
  Make sure to replace `YOUR_APP_ID`, `YOUR_AUTH_KEY`, and `YOUR_REGION` with your actual CometChat credentials.
</Note>

## Next Steps

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="download" href="/ui-kit/angular/integration">
    Full setup guide with examples
  </Card>

  <Card title="Components" icon="layer-group" href="/ui-kit/angular/components/components-overview">
    Explore all available components
  </Card>
</CardGroup>