shadcn/ui Introduces New Chat Components for Building Conversational Interfaces

New Chat Components Released

shadcn, the design engineer behind shadcn/ui, has launched a new collection of components specifically designed for creating chat interfaces. This release integrates streaming conversation primitives directly into shadcn/ui, marking the first time such functionalities are available within the framework.

The initial phase of this effort includes five core components: MessageScroller, Message, Bubble, Attachment, and Marker. Additionally, two new CSS utilities, scroll-fade and shimmer, have been introduced to support these components. Installation is managed through the familiar shadcn CLI.

Core Functionality of MessageScroller

At the center of this release is MessageScroller, a scroll container engineered to manage intricate chat-related behaviors. These include anchored turns, streamed replies, saved thread restoration, prepended history, jump-to-message functionality, scroll controls, and visibility tracking. MessageScroller handles these behaviors without dictating message content, AI state, transport, persistence, or model state, allowing developers to supply their own content renderer.

Complementing MessageScroller, the Message component lays out a conversation row, Bubble renders the message surface with reactions and buttons, Attachment manages files and images with upload states, and Marker displays status updates and separators for elements like tool activity and date breaks.

Introduction of @shadcn/react

Alongside the chat components, shadcn also introduced @shadcn/react, a new package offering unstyled, headless components. This package allows for the shipping of tested interaction logic independently of visual styles. The initial component available in this package is message-scroller, with the shadcn/ui registry component wrapping it in specific styles. These components are compatible with both Radix and Base UI.

Industry Reception and Context

The announcement garnered significant attention, with Vercel CEO Guillermo Rauch endorsing the release. Despite a reported GitHub issue regarding MessageScroller mount-time anchors, broader sentiment on Hacker News remains positive, with developers appreciating the modular, copy-paste model that allows for individual component upgrades and avoids version lock-in.

This release exists alongside Vercel's AI Elements, which is also built on shadcn/ui and integrates with the AI SDK useChat hook. shadcn clarified that the new chat components do not replace AI Elements, and existing users are not required to rewrite their implementations.