# Team chat

> Team chat with channels, reactions, mentions, typing indicator and mobile drawer.

Block · Pro · https://lodeui.com/blocks/team-chat

## When to use

- Collaboration tools and in-app messaging.

## When not to use

- Customer support threads: use the support ticket block.

## Installation

```bash
npx shadcn@latest add @lode/team-chat
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TeamChat } from "@/components/blocks/team-chat";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <TeamChat />
    </main>
  );
}
```

Built from: Mention input, Typing indicator

## API reference

### TeamChat

A team chat with channels and unread counts, message reactions, @mentions, a typing indicator and a mobile channel drawer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ⌘Enter / Ctrl+Enter | Send |
| @ | Mention someone |
| Tab | Reach reactions and channels |

## Accessibility

- Messages are articles in a live region; reactions are toggle buttons named with their count.
- The mobile channel list is a labelled dialog.

## Motion

- Messages rise in; reactions pop; the typing indicator appears before replies; the active channel marker slides.

## Responsive behavior

- The channel sidebar becomes a drawer below 768px.

## Performance

- Auto-scrolls only when new messages arrive.

## Notes for AI

- Replace the simulated reply with your realtime channel (WebSocket or SSE).

## Related

- [Mention input](https://lodeui.com/components/mention-input) — A textarea that suggests people as you type @ and inserts their handle.
- [Typing indicator](https://lodeui.com/components/typing-indicator) — Bouncing dots in a chat bubble with who is typing.
- [Chat message](https://lodeui.com/components/chat-message) — A chat turn with streaming cursor, copy, feedback and regenerate.
- [Inbox triage](https://lodeui.com/blocks/inbox-triage) — Keyboard-first triage: j/k to move, e to archive, s to snooze, with undo.