Prompt Kit
uichat-containersource: ok · hit
Chat Container
A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth and responsive user experience
npx shadcn add "https://www.prompt-kit.com/c/chat-container.json"free
Where it goes
chat
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightuse-stick-to-bottom
Files1 · source cached 10/9/2026, 11:29:13 AM
chat-container.tsx
"use client"
import { cn } from "@/lib/utils"
import { StickToBottom } from "use-stick-to-bottom"
export type ChatContainerRootProps = {
children: React.ReactNode
className?: string
} & React.HTMLAttributes<HTMLDivElement>
export type ChatContainerContentProps = {
children: React.ReactNode
className?: string
} & React.HTMLAttributes<HTMLDivElement>
export type ChatContainerScrollAnchorProps = {
className?: string
ref?: React.RefObject<HTMLDivElement>
} & React.HTMLAttributes<HTMLDivElement>
function ChatContainerRoot({
children,
className,
...props
}: ChatContainerRootProps) {
return (
<StickToBottom
className={cn("flex overflow-y-auto", className)}
resize="smooth"
initial="instant"
role="log"
{...props}
>
{children}
</StickToBottom>
)
}
function ChatContainerContent({
children,
className,
...props
}: ChatContainerContentProps) {
return (
<StickToBottom.Content
className={cn("flex w-full flex-col", className)}
{...props}
>
{children}
</StickToBottom.Content>
)
}
function ChatContainerScrollAnchor({
className,
...props
}: ChatContainerScrollAnchorProps) {
return (
<div
className={cn("h-px w-full shrink-0 scroll-mt-4", className)}
aria-hidden="true"
{...props}
/>
)
}
export { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor }