║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

import ComponentCodePreview from "@/components/app/component-code-preview" import { generateMetadata } from "../utils/metadata" import { ChatBasic } from "./chat-basic" import { ChatWithCustomScroll } from "./chat-with-custom-scroll"

export const metadata = generateMetadata( "Chat Container", "A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth experience in conversation interfaces." )

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

<ComponentCodePreview component={<ChatWithCustomScroll />} filePath="app/docs/chat-container/chat-with-custom-scroll.tsx" classNameComponentContainer="p-0" />

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.

<ComponentCodePreview component={<ChatBasic />} filePath="app/docs/chat-container/chat-basic.tsx" classNameComponentContainer="p-0" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

<CodeBlock code={npx shadcn add "https://prompt-kit.com/c/chat-container.json"} language="bash" />

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/chat-container.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

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 | Default | 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 | Default | 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 | Default | 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:

<CodeBlock code={`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> ) } `} language="tsx" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║