shadcn, the creator of shadcn/ui, has released a new set of components aimed at building AI chat interfaces. Five parts covering streaming display, scroll control and message bubbles have been added as standard to the copy-and-paste UI library.
June 26, 2026 · shadcn/ui
Chat Components Land Natively in shadcn/ui
Five composable primitives for the conversation layer — streaming, scrolling, messages, bubbles and attachments — arrive as the "first phase" of official chat UI work, alongside a new headless @shadcn/react package.
5
new chat primitives added to the core
2
CSS utilities: scroll-fade & shimmer
1
new headless package: @shadcn/react
The Five Primitives
MessageScroller
Auto-scroll during streaming, anchoring, history restoration, prepend support
Message
Row layout — avatar, alignment, header, footer, grouping
Bubble
Message surface — variants, reactions, links, buttons, collapsible content
Attachment
File & image display — metadata, upload state, actions
Marker
Status updates, system notes, date separators, tool activity
Welcomed
Official low-level, composable approach seen as a differentiator
Abstracts scroll behavior — a long-standing pain point
Complements AI Elements — no rewrite needed for existing users
Early Caveats
Displaying Markdown in Message requires additional work
Only phase one — conversation layer for now
More components expected incrementally
First Phase
The conversation layer, rethought from the ground up — not a wrapper over existing libraries.
Streaming
→
Scrolling
→
Messages
→
Bubbles & Attachments
Targets React / Next.js, with a documented example pairing MessageScroller with useChat from @ai-sdk/react .
Continue reading The rest of this article is for AI News Blitz readers. Choose an option below to keep reading.
Already purchased? Sign in ✓ Signed in — this article isn’t included in your current plan.Unlocking the full article…