Thread

AI chats 2

About

A scrollable chat message container that automatically sticks to the bottom as new messages arrive and shows a jump-to-bottom button when the user scrolls up.

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

Code

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

Usage.tsx

"use client";

import {
  Thread,
  ThreadContent,
  ThreadScrollToBottom,
} from "@/components/ui/thread";

export default function ThreadDemo() {
  return (
    <div className="w-full h-[500px] rounded-xl border border-border overflow-hidden bg-background">
      <Thread>
        <ThreadContent>
          {Array.from({ length: 10 }).map((_, i) =>
            i % 2 === 0 ? (
              <div
                key={i}
                className="ml-auto max-w-[80%] rounded-full bg-muted px-4 py-2 text-sm text-foreground"
              >
                Message {i + 1}: This is a sample chat message used to
                demonstrate the scrollable thread.
              </div>
            ) : (
              <div
                key={i}
                className="max-w-[80%] text-sm leading-relaxed text-foreground"
              >
                Message {i + 1}: This is a sample chat message used to
                demonstrate the scrollable thread.
              </div>
            ),
          )}
        </ThreadContent>
        <ThreadScrollToBottom />
      </Thread>
    </div>
  );
}