# Thread
Source: https://ui.spencerwueste.com/docs/components/thread
Markdown: https://ui.spencerwueste.com/llm/components/thread.md

> Scroll container that stays pinned to the newest message while content streams in.

> Live preview: https://ui.spencerwueste.com/docs/components/thread (demo source: `src/demos/thread-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/thread.json
```

Manual install dependencies: `radix-ui use-stick-to-bottom @heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/thread.json

## Usage

```tsx
import {
  Thread,
  ThreadContent,
  ThreadScrollToBottom,
} from "@/components/pandacoderz-ui/thread";
```

```tsx
<Thread className="h-[600px]">
  <ThreadContent>
    {messages.map((m) => (
      <Message key={m.id} from={m.role}>…</Message>
    ))}
  </ThreadContent>
  <ThreadScrollToBottom />
</Thread>
```

`Thread` must have a bounded height (or be inside a flex column with `min-h-0`) so the content can scroll.

## API Reference

### Thread

Wraps [`use-stick-to-bottom`](https://github.com/stackblitz/use-stick-to-bottom). Accepts its props; `resize` and `initial` default to `"smooth"`.

### ThreadScrollToBottom

Renders nothing while the viewport is already at the bottom. Accepts `asChild` to use your own button.