shadcn, the design engineer behind the widely used shadcn/ui project at Vercel, has released a new set of components for building chat interfaces, bringing streaming conversation primitives directly into shadcn/ui for the first time.
The release covers what shadcn calls the conversation layer, with five components, MessageScroller, Message, Bubble, Attachment, and Marker, alongside two new CSS utilities, scroll-fade and shimmer. It is described as the first phase of a larger effort, reimagining the abstraction behind each part and shipping them one piece at a time so developers can copy, compose, and adapt them. Installation runs through the familiar CLI:
pnpm dlx shadcn@latest add message-scroller message bubble attachment marker
At the centre is MessageScroller, the scroll container that handles the details that are easy to get wrong, including anchored turns, streamed replies, saved thread restore, prepended history, jump-to-message, scroll controls, and visibility tracking. It owns that behaviour without owning your messages, AI state, transport, persistence, or model state, so you supply the content renderer. Around it, Message lays out a conversation row, Bubble renders the message surface with reactions and buttons, Attachment handles files and images with upload state, and Marker renders status updates and separators for things like tool activity and date breaks.
shadcn also introduced @shadcn/react, a new package for unstyled, headless components, starting with message-scroller. The registry component wraps it in shadcn/ui styles while the scroll behaviour lives in the package, letting the team ship tested interaction logic without locking it to a visual style. Everything is available for both Radix and Base UI.
Vercel chief executive Guillermo Rauch declared that "The UI for AI is here. It's @shadcn," and the announcement passed 950,000 views within days. A GitHub issue reported that MessageScroller mount-time anchors are never applied, reproducible with the headless primitives alone. Broader sentiment on Hacker News continues to favour the copy-paste model, with developers noting they can upgrade components individually and avoid the version lock-in common to libraries like MUI.
The release raises a question of how this relates to Vercel's own AI Elements, itself built on shadcn/ui with more than 20 components tied to the AI SDK useChat hook. shadcn was explicit that the release does not replace it, existing users do not need to rewrite anything, and should reach for the shadcn/ui version only when they want the newer abstraction, updated styling, or Radix and Base UI support. For anyone moving from the styled components to the headless package, the docs provide a direct parts mapping, where MessageScroller becomes MessageScroller.Root and MessageScrollerProvider becomes MessageScroller.Provider.
Beyond Vercel's tools, the ecosystem already offers alternatives such as Blazity's shadcn-chatbot-kit and ibelick's prompt-kit, both community favourites for assembling AI chat UIs. By folding these patterns into shadcn/ui itself, shadcn is betting that chat has become a default interface worth standardising, one primitive at a time.
shadcn/ui is an open source, MIT licensed component distribution project created by shadcn, a design engineer on the AI team at Vercel. Rather than shipping as an installable dependency, it gives developers copy and paste components built with React and Tailwind CSS that they own and customise, working across both Radix and Base UI primitives. It has become one of the most widely adopted approaches to building React interfaces, with more than 121,000 GitHub stars and a registry now serving over 10 million components a week.