React AI Conversation

Powered by

AI Elements

use-stick-to-bottom

Radix UI

Chat interfaces that don't auto-scroll are broken. Users shouldn't have to manually scroll down every time a new message arrives. This free open source React component handles the scroll behavior that makes conversations feel natural in your Next.js application—stick to bottom included.

Auto-scrolling conversation

Chat container with automatic scroll-to-bottom behavior:

'use client';import {  Conversation,  ConversationContent,  ConversationScrollButton,} from '@/components/ui/shadcn-io/ai/conversation';import { Message, MessageAvatar, MessageContent } from '@/components/ui/shadcn-io/ai/message';import { nanoid } from 'nanoid';import { useEffect, useState } from 'react';const messages: { key: string; value: string; name: string; avatar: string }[] =  [    {      key: nanoid(),      value: 'Hello! How can I help you today?',      name: 'Alex',      avatar: 'https://github.com/dovazencot.png',    },    {      key: nanoid(),      value: "I'd like to learn about React hooks.",      name: 'Assistant',      avatar: 'https://github.com/openai.png',    },    {      key: nanoid(),      value: 'Great topic! Which hook interests you most?',      name: 'Alex',      avatar: 'https://github.com/dovazencot.png',    },    {      key: nanoid(),      value: 'useState and useEffect are the most common ones.',      name: 'Assistant',      avatar: 'https://github.com/openai.png',    },    {      key: nanoid(),      value: 'Perfect! Let me show you some examples.',      name: 'Alex',      avatar: 'https://github.com/dovazencot.png',    },    {      key: nanoid(),      value: 'That would be really helpful, thanks!',      name: 'Assistant',      avatar: 'https://github.com/openai.png',    },  ];const Example = () => {  const [visibleMessages, setVisibleMessages] = useState<    {      key: string;      value: string;      name: string;      avatar: string;    }[]  >([]);  useEffect(() => {    let currentIndex = 0;    const interval = setInterval(() => {      if (currentIndex < messages.length && messages[currentIndex]) {        const currentMessage = messages[currentIndex];        setVisibleMessages((prev) => [          ...prev,          {            key: currentMessage.key,            value: currentMessage.value,            name: currentMessage.name,            avatar: currentMessage.avatar,          },        ]);        currentIndex++;      } else {        clearInterval(interval);      }    }, 500);    return () => clearInterval(interval);  }, []);  return (    <Conversation className="relative size-full" style={{ height: '498px' }}>      <ConversationContent>        {visibleMessages.map(({ key, value, name, avatar }, index) => (          <Message from={index % 2 === 0 ? 'user' : 'assistant'} key={key}>            <MessageContent>{value}</MessageContent>            <MessageAvatar name={name} src={avatar} />          </Message>        ))}      </ConversationContent>      <ConversationScrollButton />    </Conversation>  );};export default Example;

'use client';import { Button } from '@/components/ui/button';import { cn } from '@/lib/utils';import { ArrowDownIcon } from 'lucide-react';import type { ComponentProps } from 'react';import { useCallback } from 'react';import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';export type ConversationProps = ComponentProps<typeof StickToBottom>;export const Conversation = ({ className, ...props }: ConversationProps) => (  <StickToBottom    className={cn('relative flex-1 overflow-y-auto', className)}    initial="smooth"    resize="smooth"    role="log"    {...props}  />);export type ConversationContentProps = ComponentProps<  typeof StickToBottom.Content>;export const ConversationContent = ({  className,  ...props}: ConversationContentProps) => (  <StickToBottom.Content className={cn('p-4', className)} {...props} />);export type ConversationScrollButtonProps = ComponentProps<typeof Button>;export const ConversationScrollButton = ({  className,  ...props}: ConversationScrollButtonProps) => {  const { isAtBottom, scrollToBottom } = useStickToBottomContext();  const handleScrollToBottom = useCallback(() => {    scrollToBottom();  }, [scrollToBottom]);  return (    !isAtBottom && (      <Button        className={cn(          'absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full',          className        )}        onClick={handleScrollToBottom}        size="icon"        type="button"        variant="outline"        {...props}      >        <ArrowDownIcon className="size-4" />      </Button>    )  );};

This React component automatically scrolls when new messages arrive, shows a scroll button when users scroll up, and maintains position during typing. Built with TypeScript for type safety and Tailwind CSS for consistent styling in your JavaScript projects.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from "@/components/ai/conversation";

<Conversation className="relative w-full" style={{ height: "500px" }}>
  <ConversationContent>
    <Message from={"user"}>
      <MessageContent>Hi there!</MessageContent>
    </Message>
  </ConversationContent>
  <ConversationScrollButton />
</Conversation>;

Why scroll behavior matters

Bad scroll handling kills chat UX in React applications. Users miss new messages, lose their place, or fight with jumpy animations. Get it wrong and your chat feels broken.

Auto-scroll isn't just convenience in Next.js projects—it's expected behavior. Every major chat app does it. Skip it and users think something's wrong in your JavaScript implementation.

Usage with AI SDK

Build conversational UI with automatic scrolling in React applications:

"use client";

import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from "@/components/ai/conversation";
import { Message, MessageContent } from "@/components/ai/message";
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputSubmit,
} from "@/components/ai/prompt-input";
import { Response } from "@/components/ai/response";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";

export default function Chat() {
  const [input, setInput] = useState("");
  const { messages, append, status } = useChat();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      append({ role: "user", content: input });
      setInput("");
    }
  };

  return (
    <div className="flex flex-col h-full">
      <Conversation>
        <ConversationContent>
          {messages.map((message) => (
            <Message from={message.role} key={message.id}>
              <MessageContent>
                <Response>{message.content}</Response>
              </MessageContent>
            </Message>
          ))}
        </ConversationContent>
        <ConversationScrollButton />
      </Conversation>

      <PromptInput onSubmit={handleSubmit} className="mt-4">
        <PromptInputTextarea
          value={input}
          placeholder="Say something..."
          onChange={(e) => setInput(e.currentTarget.value)}
        />
        <PromptInputSubmit status={status} disabled={!input.trim()} />
      </PromptInput>
    </div>
  );
}

Backend route for streaming:

// app/api/chat/route.ts
import { streamText, convertToModelMessages } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: "openai/gpt-4o",
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

Features

• Automatic scrolling to bottom when new messages arrive in React applications
• Smooth scrolling animations with configurable behavior in TypeScript components
• Scroll-to-bottom button that appears when scrolled up
• Maintains scroll position while users read history in JavaScript frameworks
• Responsive design with customizable padding for Next.js projects
• ARIA roles for screen reader accessibility
• Resize handling without scroll jumps in modern React applications
• Free open source component perfect for AI chat, support systems, and messaging apps
• Built for Next.js with shadcn/ui design system integration

API Reference

Conversation

Main container with scroll behavior management.

ConversationContent

Content wrapper with consistent spacing.

ConversationScrollButton

Floating button to return to bottom.

Keyboard interactions

Production tips

Set explicit height. Conversation needs a height constraint to scroll in React applications. Use viewport units or fixed height.

Debounce scroll events. Heavy scroll listeners kill performance in JavaScript implementations. This component handles this automatically.

Keep scroll button visible. Users panic when they can't find bottom in Next.js projects. The button should be obvious.

Test with long conversations. 100+ messages reveal performance issues in TypeScript components. Virtualize if needed.

Handle image loading. Images that load after render break scroll position in React applications. Use fixed dimensions.

Integration with other components

Conversation works seamlessly with Message for displaying chat bubbles in React applications. Combine with PromptInput for complete chat UI in Next.js projects. Use with Response for markdown rendering. This free open source component family ensures consistent styling across all JavaScript frameworks with shadcn/ui design system.

Questions developers actually ask