--- title: June 2026 - Components for Chat Interfaces | daily.dev description: shadcn/ui released a new set of components for building chat interfaces: MessageScroller, Message, Bubble, Attachment, and Marker. MessageScroller handles... canonical: https://daily.dev/posts/june-2026---components-for-chat-interfaces-n0erixix7 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: June 2026 - Components for Chat Interfaces | daily.dev og:description: shadcn/ui released a new set of components for building chat interfaces: MessageScroller, Message, Bubble, Attachment, and Marker. MessageScroller handles... og:url: https://daily.dev/posts/june-2026---components-for-chat-interfaces-n0erixix7 og:image: https://api.daily.dev/og/posts/N0ErIxix7.png og:image:alt: June 2026 - Components for Chat Interfaces og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # June 2026 - Components for Chat Interfaces **[The Foundation for your Design System - shadcn/ui](https://daily.dev/sources/shadcn-ui)** · 4 min read · 0 upvotes · 0 comments ## Summary shadcn/ui released a new set of components for building chat interfaces: MessageScroller, Message, Bubble, Attachment, and Marker. MessageScroller handles scroll behavior like anchored turns, streamed replies, thread restore, and jump-to-message, while the other components cover message layout, bubble surfaces, file attachments, and status markers. Two new CSS utilities, scroll-fade and shimmer, were added for scroll edge fades and text shimmer effects on streaming status text. A new package, @shadcn/react, provides unstyled headless versions of these components, starting with message-scroller, supporting Radix and Base UI. This release complements rather than replaces AI Elements from the AI SDK. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What new components did shadcn/ui add for building chat interfaces? Shadcn/ui added five new components: MessageScroller, Message, Bubble, Attachment, and Marker. MessageScroller is the scroll container handling anchored turns, streamed replies, thread restore, prepended history, and jump-to-message. Message lays out conversation rows, Bubble renders message surfaces with reactions and links, Attachment handles files and images with upload state, and Marker renders status updates and separators. _daily.dev helps developers track new shadcn/ui component releases as chat interfaces evolve._ ### Does the new shadcn/ui chat components release replace AI SDK's AI Elements? No, it does not replace AI Elements from the AI SDK. Existing AI Elements users can keep their current implementation without rewriting anything, and can selectively try the shadcn/ui versions when they want the newer abstraction, updated styling, or support across Radix and Base UI, since the two can be adopted independently. _Developers choosing between AI Elements and shadcn/ui chat components can compare options on daily.dev._ ### What is @shadcn/react and which UI libraries does it support? @shadcn/react is a new package of unstyled, headless React components, starting with @shadcn/react/message-scroller, which contains the scroll behavior logic such as anchoring, auto-follow, prepend preservation, scroll commands, and visibility tracking. The registry component wraps this headless primitive with shadcn/ui styling. It is available now for both Radix and Base UI. _daily.dev keeps frontend developers current on new headless component packages like this one._ ## Similar posts on daily.dev - [shadcn Brings Conversational Primitives to shadcn/ui with New Chat Components](https://daily.dev/posts/shadcn-brings-conversational-primitives-to-shadcn-ui-with-new-chat-components-kemwvshut) · InfoQ · 0 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#tailwind-css](https://daily.dev/tags/tailwind-css), [#shadcn](https://daily.dev/tags/shadcn) [View this post on daily.dev](https://daily.dev/posts/june-2026---components-for-chat-interfaces-n0erixix7) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"June 2026 - Components for Chat Interfaces","url":"https://daily.dev/posts/june-2026---components-for-chat-interfaces-n0erixix7","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/june-2026---components-for-chat-interfaces-n0erixix7"},"datePublished":"2026-08-23T12:17:35.441Z","dateModified":"2026-08-24T07:04:04.523Z","description":"shadcn/ui released a new set of components for building chat interfaces: MessageScroller, Message, Bubble, Attachment, and Marker. MessageScroller handles...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/3bade7f1d912d930e2864248b918e8b6?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/3bade7f1d912d930e2864248b918e8b6?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"The Foundation for your Design System - shadcn/ui","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"The Foundation for your Design System - shadcn/ui","logo":"https://media.daily.dev/image/upload/s--GiOq6F7Y--/f_auto,q_auto/v1787487441/logos/shadcn-ui?_a=BAMAMicg0","url":"https://daily.dev/sources/shadcn-ui"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/june-2026---components-for-chat-interfaces-n0erixix7","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,tailwind-css,shadcn","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"The Foundation for your Design System - shadcn/ui","item":"https://daily.dev/sources/shadcn-ui"},{"@type":"ListItem","position":3,"name":"June 2026 - Components for Chat Interfaces"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/june-2026---components-for-chat-interfaces-n0erixix7#faq","mainEntity":[{"@type":"Question","name":"What new components did shadcn/ui add for building chat interfaces?","acceptedAnswer":{"@type":"Answer","text":"Shadcn/ui added five new components: MessageScroller, Message, Bubble, Attachment, and Marker. MessageScroller is the scroll container handling anchored turns, streamed replies, thread restore, prepended history, and jump-to-message. Message lays out conversation rows, Bubble renders message surfaces with reactions and links, Attachment handles files and images with upload state, and Marker renders status updates and separators. daily.dev helps developers track new shadcn/ui component releases as chat interfaces evolve."}},{"@type":"Question","name":"Does the new shadcn/ui chat components release replace AI SDK's AI Elements?","acceptedAnswer":{"@type":"Answer","text":"No, it does not replace AI Elements from the AI SDK. Existing AI Elements users can keep their current implementation without rewriting anything, and can selectively try the shadcn/ui versions when they want the newer abstraction, updated styling, or support across Radix and Base UI, since the two can be adopted independently. Developers choosing between AI Elements and shadcn/ui chat components can compare options on daily.dev."}},{"@type":"Question","name":"What is @shadcn/react and which UI libraries does it support?","acceptedAnswer":{"@type":"Answer","text":"@shadcn/react is a new package of unstyled, headless React components, starting with @shadcn/react/message-scroller, which contains the scroll behavior logic such as anchoring, auto-follow, prepend preservation, scroll commands, and visibility tracking. The registry component wraps this headless primitive with shadcn/ui styling. It is available now for both Radix and Base UI. daily.dev keeps frontend developers current on new headless component packages like this one."}}]} ```