Chat Thread React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Chat Thread is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import ChatThread from @/components/ui/chat-thread.

import { useState } from "react"
import { ChatThread, type ChatMessageData, type ChatThreadLabels } from "@/components/ui/chat-thread"
import { PromptInput } from "@/components/ui/prompt-input"
import { createChatId, mockStream } from "@/lib/ai-chat"

const labels: Partial<ChatThreadLabels> = {
  greeting: "Hi, Anna! How can I help today?",
  jump: "Back to the latest message",
}

export function Assistant() {
  const [messages, setMessages] = useState<ChatMessageData[]>([])
  const [thinking, setThinking] = useState(false)

  async function send(text: string) {
    const id = createChatId("a")
    setMessages((list) => [...list, { id: createChatId("u"), role: "user", content: text, createdAt: Date.now() }])
    setThinking(true)
    let content = ""
    for await (const part of mockStream("I found **3 overdue invoices**, $22,775.95 in total.")) {
      if (!content) setThinking(false)
      content += part
      const snapshot = content
      // a new object only for the message that changed
      setMessages((list) =>
        list.some((m) => m.id === id)
          ? list.map((m) => (m.id === id ? { ...m, content: snapshot } : m))
          : [...list, { id, role: "assistant", content: snapshot, status: "streaming", createdAt: Date.now() }],
      )
    }
    setMessages((list) => list.map((m) => (m.id === id ? { ...m, status: "complete" } : m)))
  }

  return (
    <div className="h-dvh">
      <ChatThread
        messages={messages}
        thinking={thinking}
        labels={labels}
        composer={<PromptInput onSubmit={(message) => send(message.text)} />}
      />
    </div>
  )
}

Props

• messages*
  ChatMessageData[]

  The conversation, oldest first. Keep message objects immutable: give only the message that changed a new object, so only it re-renders while text streams. Repeated ids are skipped.

• thinkingdefault false
  boolean

  Shows the pending assistant row (the mark and three dots) after sending and before the first token, unless the last message is already a pending or streaming answer.

• composer
  ReactNode

  Usually a PromptInput. The thread pins it under the reading column above the safe area, with a fade over the messages behind it. Leave it out for a read-only thread.

• header
  ReactNode

  A bar above the scroller: the title, a model picker, share.

• emptyState
  ReactNode

  Replaces the greeting of an empty thread entirely.

• greetingdefault ""
  ReactNode

  The empty state's title. Empty uses labels.greeting.

• emptyDescriptiondefault ""
  ReactNode

  A line under the greeting.

• emptyIcon
  ReactNode

  The empty state's icon. An AI mark by default; a FluidOrb or a logo.

• suggestions
  ChatSuggestion[]

  Starter cards in the empty state: a grid on desktop, a rail on phones.

• followUps
  ChatSuggestion[]

  Rows under the latest answer, shown once it is complete and nothing is thinking.

• onSuggestionSelect
  (suggestion: ChatSuggestion) => void

  A starter card or a follow-up was chosen; send suggestion.prompt ?? suggestion.label.

• onRegenerate
  ((message: ChatMessageData) => void | Promise<unknown>)

  Regenerate on an assistant message. A returned promise keeps the button loading.

• onEdit
  ((message: ChatMessageData, content: string) => void | Promise<unknown>)

  A user message was edited in place and sent again.

• onFeedbackChange
  ((message: ChatMessageData, feedback: ChatFeedback) => void | Promise<unknown>)

  The thumbs on assistant messages. Store it in the message's feedback to control it; a rejected promise rolls back.

• onRetry
  ((message: ChatMessageData) => void | Promise<unknown>)

  Retry on a message with status error.

• onCopy
  (message: ChatMessageData, text: string) => void

  After a message was copied (copying is built in).

• onBranchChange
  (message: ChatMessageData, index: number) => void

  The version switcher of a message with branch.count above 1.

• messageProps
  Partial<ChatMessageProps>

  Presentation props for every message: bubble, tone, color, showAvatar, assistantAvatar, timestamp, menu, labels, markdownProps. Keep it memoized (a module constant or useMemo) so finished messages never re-render.

• renderMessage
  (message: ChatMessageData, props: ChatMessageProps) => ReactNode

  Full control over a message (a custom card for some). Return undefined for the default ChatMessage.

• variantdefault "default"
  "default" | "bubbles" | "flat"

  The messages' layout. default: your bubble on the right, the answer as text on the left. bubbles: both in bubbles (support widgets). flat: both on the left with avatars and names (team threads). messageProps.variant wins.

• sizedefault "md"
  "sm" | "md"

  Message text, avatars and gaps. sm fits copilot side panels.

• maxWidthdefault "md"
  "sm" | "md" | "lg" | "full"

  The reading column of the messages and the composer: 640 / 768 / 960px or the full width.

• dateSeparatorsdefault true
  boolean

  A day pill between days ("Yesterday", "Today", "Monday", "Sep 22, 2026") that sticks to the top while its day scrolls. Messages without createdAt get none.

• stickToBottomdefault true
  boolean

  Follows new content while the reader is at the bottom, and lets go as soon as they scroll up.

• jumpButtondefault true
  boolean

  The pill that shows while scrolled up, with the number of replies that arrived since.

• hasMoredefault false
  boolean

  Older messages exist: a sentinel at the top calls onLoadMore when it comes within 400px, once per cycle.

• onLoadMore
  (() => void | Promise<unknown>)

  Prepend older messages. The first visible message stays exactly where it was.

• loadingMoredefault false
  boolean

  A spinner at the top while older messages load.

• loadingdefault false
  boolean

  The first load: three skeleton message pairs in place of an empty thread.

• announcedefault "notice"
  "notice" | "full" | "off"

  The polite live region. notice: says when a reply starts and when it is ready. full: also reads the first 600 characters of the reply. The thread itself is never a live region.

• now
  Date | number

  The reference time for day labels and message times (default: the current minute).

• localedefault ""
  string

  Day labels, dates and counts. Empty uses the app's locale.

• labels
  Partial<ChatThreadLabels>

  Every string: conversation, messages, greeting, jump, newMessages(count, formatted), loadMore, loadingMore, loading, thinking, responseStarted, responseReady, responseFailed, today and yesterday (empty uses the locale's word), suggestions, followUps. English by default (DEFAULT_CHAT_THREAD_LABELS). Message strings go in messageProps.labels.

• classNames
  Partial<Record<"header" | "scroller" | "content" | "list" | "item" | "separator" | "loadMore" | "thinking" | "followUps" | "empty" | "jump" | "composer", string>>

  Extra classes for the inner parts. On a surface other than the page, set the composer fade with className="[--chat-thread-fade:var(--popover)]".

Parts

FAQ

Used in

More React AI components