A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth experience in conversation interfaces.
Auto-follow preview
A compact thread using the default `smooth` resize preset.
The latest reply will stay pinned to the bottom as the thread grows.
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
Examples
Basic conversation
A standard message list wrapped in the auto-scrolling container primitives.
Basic conversation
Append a message and the container stays pinned to the bottom.
Absolutely. Start with tracking, latency budgets, rate limiting, and a short fallback experience for model downtime.
Check analytics, moderation coverage, prompt regression cases, and whether support has canned responses for common failures.
Streaming response
Stream new assistant text into the latest message while the container keeps pace near the bottom.
Streaming response
Streaming text keeps the last assistant reply visible as it grows.
auto-fit tells the grid to create as many columns as will fit while respecting the minimum size you provide.
Preset comparison
Compare the built-in `smooth` and `ease-out` resize animations with identical message content.
Preset comparison
Compare `smooth` and `ease-out` with the same message flow.
smooth
Use smooth if you want the default spring, or ease-out if you want a softer finish at the bottom.
ease-out
Use smooth if you want the default spring, or ease-out if you want a softer finish at the bottom.
Props
ChatContainer.Root
| Prop | Type | Default | Description |
|---|---|---|---|
ref | HTMLDivElement | null | - | Bindable reference to the scrollable root element. |
children | Snippet | - | Message list and any overlay controls rendered inside the scroll area. |
class | string | - | Additional CSS classes for the scroll container. |
resize | "instant" | "smooth" | "ease-out" | { damping?: number; stiffness?: number; mass?: number } | "smooth" | Animation used when content height changes while sticking to the bottom. |
initial | false | "instant" | "smooth" | "ease-out" | { damping?: number; stiffness?: number; mass?: number } | "instant" | Initial scroll behavior applied when the container first measures content. |
ChatContainer.Content
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Message content rendered inside the tracked content element. |
class | string | - | Additional CSS classes for the content wrapper. |