React AI Message

This is the big one—the message component that handles everything in a chat UI. User messages, assistant messages, file attachments, image previews, conversation branching (like when you regenerate a response and want to flip between versions), streaming markdown, action buttons for copy/like/retry. It's a lot, but it's all composable so you pick what you need. User messages go right with a subtle background, assistant messages go left and render markdown. The markdown rendering uses Streamdown which is optimized for streaming—no weird flashing as tokens come in. We've battle-tested this on production chat apps with thousands of messages. It handles the edge cases.

Message preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/message.json

npx shadcn@latest add https://www.shadcn.io/r/message.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/message.json

bunx shadcn@latest add https://www.shadcn.io/r/message.json

Related Components

FAQ