About
A chat thread UI that groups consecutive messages from the same person under one avatar, shows an overlapping member facepile in the header, and displays a typing indicator.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Group Chat to your project and fits it to your theme.
Code
How Group Chat is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import GroupChat from "@/components/ui/group-chat";
export default function GroupChatDemo() {
return (
<div className="flex w-full max-w-md items-center justify-center p-8">
<GroupChat
channel="design-team"
members={["alain00", "maya", "jonas", "priya"]}
extra={2}
typing="maya"
messages={[
{
name: "alain00",
text: "Pushed the new avatar API, take a look",
time: "9:41",
},
{
name: "alain00",
text: "It's deterministic now, same handle same face",
},
{
name: "maya",
text: "Nice, trying it on the settings page",
time: "9:44",
},
{
name: "jonas",
text: "Facepile looks great in the header",
time: "9:46",
},
]}
/>
</div>
);
}
Dependencies
More by alain00
View all
User Table
242
Password Field
3
Presence Avatar