Chat Container

A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth experience in conversation interfaces.

Examples

Chat container basic

Hello! Can you help me with a coding question?

Of course! I'd be happy to help with your coding question. What would you like to know?

How do I create a responsive layout with CSS Grid?

Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

This creates a grid where:

Columns automatically fit as many as possible
Each column is at least 250px wide
Columns expand to fill available space
There's a 1rem gap between items

Would you like me to explain more about how this works?

Streaming Text Example

A chat container that demonstrates text streaming with automatic scrolling. Click the "Show Streaming" button to see a simulated streaming response with the smart auto-scroll behavior in action.

Hello! Can you help me with a coding question?

Of course! I'd be happy to help with your coding question. What would you like to know?

How do I create a responsive layout with CSS Grid?

Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

This creates a grid where:

Columns automatically fit as many as possible
Each column is at least 250px wide
Columns expand to fill available space
There's a 1rem gap between items

Would you like me to explain more about how this works?

Installation

npx shadcn add "https://prompt-kit.com/c/chat-container.json"

Component API

The ChatContainer is built using three separate components that work together:

ChatContainerRoot

The main container that provides auto-scrolling functionality using the use-stick-to-bottom library.

Prop	Type	Description
children	React.ReactNode	Child components to render inside the container
className	string	Additional CSS classes
...props	React.HTMLAttributes<HTMLDivElement>	All other div props

ChatContainerContent

The content wrapper that should contain your messages.

Prop	Type	Description
children	React.ReactNode	Child components to render inside the content container
className	string	Additional CSS classes
...props	React.HTMLAttributes<HTMLDivElement>	All other div props

ChatContainerScrollAnchor

An optional scroll anchor element that can be used for scroll targeting.

Prop	Type	Description
className	string	Additional CSS classes
ref	React.RefObject<HTMLDivElement>	Optional ref for the scroll anchor element
...props	React.HTMLAttributes<HTMLDivElement>	All other div props

Auto-Scroll Behavior

The component uses the use-stick-to-bottom library to provide sophisticated auto-scrolling:

Smooth Animations: Uses velocity-based spring animations for natural scrolling
Content Resizing: Automatically detects content changes using ResizeObserver API
User Control: Automatically disables sticky behavior when users scroll up
Mobile Support: Works seamlessly on touch devices
Performance: Zero dependencies and optimized for chat applications
Scroll Anchoring: Prevents content jumping when new content is added above the viewport

Key behaviors:

Stick to Bottom: Automatically scrolls to bottom when new content is added (if already at bottom)
Smart Scrolling: Only scrolls when user is at the bottom, preserves scroll position otherwise
Cancel on Scroll: User can scroll up to cancel auto-scrolling behavior
Resume Auto-Scroll: Returns to auto-scrolling when user scrolls back to bottom

Using with ScrollButton

The ChatContainer pairs perfectly with the ScrollButton component. The ScrollButton automatically appears when the user scrolls up and disappears when at the bottom:

import { ChatContainerRoot, ChatContainerContent, 
ChatContainerScrollAnchor } from "@/components/prompt-kit/chat-container"
import { ScrollButton } from "@/components/prompt-kit/scroll-button"

function ChatInterface() {
return (

<div className="relative h-[500px]">
<ChatContainerRoot className="h-full">
  <ChatContainerContent className="space-y-4">
    {/* Your chat messages here */}
    <div>Message 1</div>
    <div>Message 2</div>
    <div>Message 3</div>
  </ChatContainerContent>
  <ChatContainerScrollAnchor />
  <div className="absolute right-4 bottom-4">
    <ScrollButton className="shadow-sm" />
  </div>
</ChatContainerRoot>
</div>
) }