# @fluentui-contrib/react-chat

> Chat component powered by Fluent UI and used in Microsoft Teams.

Latest version **0.2.2** (published 2025-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui-contrib/react-chat
pnpm add @fluentui-contrib/react-chat
yarn add @fluentui-contrib/react-chat
bun add @fluentui-contrib/react-chat
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2025-11-18 |
| First published | 2023-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 205.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 56 |
| Maintainers | uifabricteam |

## Links

- npm: https://www.npmjs.com/package/@fluentui-contrib/react-chat
- Repository: https://github.com/microsoft/fluentui-contrib
- Homepage: https://github.com/microsoft/fluentui-contrib#readme
- Issues: https://github.com/microsoft/fluentui-contrib/issues
- npm.io page: https://npm.io/package/@fluentui-contrib/react-chat

## Dependencies (2)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ~0.5.11
- [@fluentui/react-jsx-runtime](https://npm.io/package/@fluentui/react-jsx-runtime.md) ^9.0.29

## Recent versions

- 0.2.2 (latest) — 2025-11-18
- 0.2.1 — 2025-10-01
- 0.2.0 — 2025-09-22
- 0.1.11 — 2025-04-10
- 0.1.10 — 2024-07-15
- 0.1.9 — 2024-02-23
- 0.1.8 — 2024-02-21
- 0.1.7 — 2023-10-25
- 0.1.6 — 2023-07-06
- 0.1.5 — 2023-07-05
- 0.1.4 — 2023-07-04
- 0.1.3 — 2023-06-01
- 0.1.2 — 2023-05-19
- 0.1.1 — 2023-05-19
- 0.1.0 — 2023-05-19

## README

# @fluentui-contrib/react-chat

Chat component powered by Fluent UI and used in Microsoft Teams.

## Try it out

```sh
yarn add @fluentui-contrib/react-chat

npm install @fluentui-contrib/react-chat
```

```tsx
import * as React from 'react';
import { Avatar } from '@fluentui/react-components';
import { Chat, ChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';

export const SampleChat = () => {
  return (
    <Chat>
      <ChatMessage avatar={<Avatar name="Ashley McCarthy" badge={{ status: 'available' }} />}>Hello I am Ashley</ChatMessage>
      <ChatMyMessage>Nice to meet you!</ChatMyMessage>
    </Chat>
  );
};
```

---
_Source: https://npm.io/package/@fluentui-contrib/react-chat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._