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

# Angular UI Kit

> Use CometChat Angular UI Kit to add standalone chat components, voice and video calling, theming, localization, and customization.

<Accordion title="AI Integration Quick Reference">
  | Field        | Value                                                                                 |
  | ------------ | ------------------------------------------------------------------------------------- |
  | Package      | `@cometchat/chat-uikit-angular` v5.x                                                  |
  | Peer deps    | `@cometchat/chat-sdk-javascript`, `dompurify`                                         |
  | Calling      | Optional — `@cometchat/calls-sdk-javascript`                                          |
  | Angular      | v18, v19, v20, v21, v22 (v22 requires Node.js 24+)                                    |
  | Localization | 19 languages built-in                                                                 |
  | Source       | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5)                |
  | AI Skills    | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
</Accordion>

The CometChat Angular UI Kit provides prebuilt, customizable standalone components for adding chat, voice, and video calling to any Angular app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mkn0UqPQ5BXljCV1/images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png?fit=max&auto=format&n=mkn0UqPQ5BXljCV1&q=85&s=5a47e5d6c2c1460337583785215594cd" width="1282" height="802" data-path="images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png" />
</Frame>

***

## Try It

<CardGroup>
  <Card title="Live Demo" icon="play" href="https://link.cometchat.com/cometchat-demo">
    Try the full chat experience in your browser
  </Card>

  <Card title="Sample App" icon="code" href="https://github.com/cometchat/cometchat-uikit-angular/tree/v5">
    Clone the sample app and start building
  </Card>
</CardGroup>

***

## Get Started

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="rocket" href="/ui-kit/angular/integration">
    Set up CometChat UIKit in your Angular project
  </Card>

  <Card title="Quickstart" icon="bolt" href="/ui-kit/angular/quickstart">
    Get up and running in 5 minutes
  </Card>

  <Card title="Conversation List" icon="comments" href="/ui-kit/angular/angular-conversation">
    Build a conversation list UI
  </Card>

  <Card title="One-to-One Chat" icon="message" href="/ui-kit/angular/angular-one-to-one-chat">
    Build a direct messaging UI
  </Card>
</CardGroup>

***

## Explore

<CardGroup cols={2}>
  <Card title="Components" icon="grid-2" href="/ui-kit/angular/components/components-overview">
    Browse all prebuilt UI components
  </Card>

  <Card title="Features" icon="comments" href="/ui-kit/angular/core-features">
    Chat, calling, AI, and extensions
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/angular/customization/theming">
    Colors, fonts, dark mode, and custom styling
  </Card>

  <Card title="Guides" icon="book" href="/ui-kit/angular/guides/guides-overview">
    Threaded messages, new chat, search, and more
  </Card>
</CardGroup>

***

## Resources

<CardGroup cols={3}>
  <Card title="Sample App" icon="github" href="https://github.com/cometchat/cometchat-uikit-angular/tree/v5">
    Working reference app
  </Card>

  <Card title="Source Code" icon="code" href="https://github.com/cometchat/cometchat-uikit-angular/tree/v5">
    Full UI Kit source on GitHub
  </Card>

  <Card title="Storybook" icon="book-open" href="https://storybook.cometchat.io/angular">
    Interactive component playground
  </Card>

  <Card title="Figma" icon="figma" href="https://www.figma.com/community/file/1442863561340379957/cometchat-ui-kit-for-web">
    Design resources and prototyping
  </Card>

  <Card title="Migration Guide" icon="arrow-up" href="/ui-kit/angular/customization/migration-guide">
    Upgrading from v4
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/ui-kit/angular/troubleshooting">
    Common issues and fixes
  </Card>

  <Card title="Support" icon="headset" href="https://help.cometchat.com/hc/en-us/requests/new">
    Open a support ticket
  </Card>
</CardGroup>