Chat Thread

Component

About

A vertical timeline-style chat log that stamps each message with a role tag along a dashed connecting line, for showing a short back-and-forth conversation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chat Thread to your project and fits it to your theme.

Code

How Chat Thread is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ChatThread } from "@/components/ui/chat-thread";

export default function ChatThreadDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <ChatThread
        title="Support thread"
        messages={[
          {
            id: "1",
            role: "user",
            text: "Hey, I never got a confirmation email for my order.",
          },
          {
            id: "2",
            role: "assistant",
            text: "Sorry about that! I just resent it to the address on file.",
          },
          { id: "3", role: "user", text: "Got it, thanks for the quick fix." },
          {
            id: "4",
            role: "assistant",
            text: "Anytime — let us know if anything else comes up.",
          },
        ]}
        className="max-w-sm"
      />
    </div>
  );
}