shadcn Brings Conversational Primitives to shadcn/ui with New Chat Components

shadcn, the design engineer behind the popular shadcn/ui project at Vercel, has introduced new components for building chat interfaces within the shadcn/ui framework. This release introduces the conversation layer, comprising five components: MessageScroller, Message, Bubble, Attachment, and Marker, alongside two new CSS utilities: scroll-fade and shimmer.

This marks the first phase of a larger initiative to reimagine the abstraction behind each part, shipping them one piece at a time to allow developers to copy, compose, and adapt them as needed. Installation is facilitated through the standard CLI tool.

At the heart of this new set is MessageScroller, the scroll container responsible for managing scroll-related features such as anchored turns, streamed replies, saved thread restoration, prepended history, jump-to-message functionality, scroll controls, and visibility tracking. It handles these functionalities separately from the content, AI state, transport, persistence, or model state, requiring developers to supply the content renderer.

Surrounding MessageScroller, Message is responsible for laying out conversation rows, Bubble renders the message surface complete with reactions and buttons, Attachment manages files and images, and Marker renders status updates and separators for elements like tool activity and date changes. Additionally, shadcn unveiled @shadcn/react, a new package designed for unstyled, headless components, initially featuring MessageScroller.

The registry package provides a shadcn/ui styling wrapper, while scroll behavior remains within the package, enabling the team to ship tested interaction logic while maintaining flexibility in visual design. Compatibility with both Radix and Base UI is ensured.

Vercel's CEO, Guillermo Rauch, highlighted that the UI for AI is now represented by shadcn, and the announcement quickly garnered over 950,000 views. However, a GitHub issue raised a concern regarding mount-time anchors in MessageScroller, which were not functioning correctly when used with headless primitives alone. The news received positive feedback on Hacker News, with developers appreciating the copy-paste model that allows for individual component upgrades and avoids version lock-in associated with libraries such as MUI.

This development prompts questions about the relationship between shadcn's release and Vercel's own AI Elements, which are built using shadcn/ui and encompass more than 20 components linked to the AI SDK via the useChat hook. Importantly, this release does not replace Vercel's AI Elements; existing users can continue using the existing components without any changes, opting for shadcn/ui only when they seek newer abstractions, updated styling, or support for Radix and Base UI.

To assist the transition, detailed documentation maps existing components to their new counterparts, such as MessageScroller becoming MessageScroller.Root and MessageScrollerProvider transitioning to MessageScroller.Provider.

The broader ecosystem has already embraced alternatives such as Blazity's shadcn-chatbot-kit and ibelick's prompt-kit, both popular community choices for constructing AI chat user interfaces. By incorporating these patterns directly into shadcn/ui, shadcn is positioning chat interfaces as a standard interface worth standardizing, advancing one primitive at a time. shadcn/ui, an open-source, MIT licensed component library created by shadcn, provides developers with copy-and-paste components built with React and Tailwind CSS, fully customizable across both Radix and Base UI primitives.

This library has gained significant traction, boasting over 121,000 GitHub stars and serving more than 10 million components weekly through its registry.