Chat Thread

Scrolling chat thread for React that renders user, assistant and system messages as bubbles, auto scrolls to the newest one and uses a live log role.

src/registry/ui/chat-thread.tsx/r/chat-thread.json

Summarise churn for September.

Net churn fell to 1.8%, down 0.4 points. Most of the drop came from annual plans renewing early after the pricing change.

Thread

Installation#

bash

npx shadcn@latest add @minidev/chat-thread

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/chat-thread.json

Usage#

tsx

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

export function Example() {
  return (
    <ChatThread
      messages={[
        { id: "1", role: "user", content: "Build a pricing table" },
        {
          id: "2",
          role: "assistant",
          content: (
            <>
              Sure — here is a starter. <CitationChip className="ml-1">1</CitationChip>
            </>
          ),
        },
        { id: "3", role: "assistant", content: "Streaming response…", streaming: true },
      ]}
    />
  )
}