React AI Conversation

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.

Conversation preview

Installation

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

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

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

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

Related Components

FAQ