Team chatPro

• Channels with unread
• Reactions
• Mentions
• Typing and replies

• Collaboration tools and in-app messaging.

• Customer support threads: use the support ticket block.

Import it from @/components/blocks/team-chat after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { TeamChat } from "@/components/blocks/team-chat";

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

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

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

• The channel sidebar becomes a drawer below 768px.

• Auto-scrolls only when new messages arrive.

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