Conversation

A scroll container that sticks to the bottom while streaming, with a scroll-to-bottom control.

$bunx shadcn@latest add @nx-ui/ai-conversation
Registry item
Installs withbuttonutils
Used byai-chat

Filled conversation

Scroll up to reveal the scroll-to-bottom button, then click it to snap back.

What's a stick-to-bottom scroll container?

It's a scroll region that keeps the newest content pinned to the bottom as it streams in — like a chat log. If you scroll up to read history, it stops auto-following so you're not yanked back down.

And when I've scrolled up, how do I get back?

A scroll-to-bottom button appears whenever you're not already at the bottom. Tap it and the view smoothly returns to the latest message, re-enabling auto-follow.

Does it need a fixed height?

Yes — give the container a bounded height (here it's h-96) so there's something to scroll within. Without a height it would just grow with its content.

Nice. Can I drop message rows straight in?

Exactly. Put Message rows inside ConversationContent and they lay out with consistent spacing. Scroll up to reveal the button, then click it to snap back.

Empty state

Shown before a conversation has any messages.

No messages yet

Start a conversation to see messages here.