React AI Conversation

Conversation preview

Getting scroll behavior right in a chat UI is surprisingly annoying. You want it to stick to the bottom as new messages stream in, but not fight the user when they scroll up to read something. This component handles all that. It uses use-stick-to-bottom under the hood, which is battle-tested for this exact use case. When the user scrolls up, a little "scroll to bottom" button appears so they can jump back down. There's also a built-in empty state for when the conversation hasn't started yet. We've used this pattern in a bunch of chat apps—it just works how users expect.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this AI component for you — no copy-paste, no CLI:

use shadcnio to install the conversation AI component into my project

Related Components

FAQ