--- title: shadcn Brings Conversational Primitives to shadcn/ui... description: shadcn/ui has added new conversational primitives for building chat interfaces, including MessageScroller, Message, Bubble, Attachment, and Marker, plus two... canonical: https://daily.dev/posts/shadcn-brings-conversational-primitives-to-shadcn-ui-with-new-chat-components-kemwvshut twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: shadcn Brings Conversational Primitives to shadcn/ui with New Chat Components | daily.dev og:description: shadcn/ui has added new conversational primitives for building chat interfaces, including MessageScroller, Message, Bubble, Attachment, and Marker, plus two... og:url: https://daily.dev/posts/shadcn-brings-conversational-primitives-to-shadcn-ui-with-new-chat-components-kemwvshut og:image: https://api.daily.dev/og/posts/keMWvshUT.png og:image:alt: shadcn Brings Conversational Primitives to shadcn/ui with New Chat Components 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. # shadcn Brings Conversational Primitives to shadcn/ui with New Chat Components **[InfoQ](https://daily.dev/sources/infoq)** · 3 min read · 0 upvotes · 0 comments ## Summary shadcn/ui has added new conversational primitives for building chat interfaces, including MessageScroller, Message, Bubble, Attachment, and Marker, plus two CSS utilities (scroll-fade and shimmer). MessageScroller handles tricky scroll behaviors like anchored turns, streamed replies, and history restoration, while leaving message data, transport, and model state to the developer. A new headless package, @shadcn/react, ships unstyled versions of these components supporting both Radix and Base UI. The release doesn't replace Vercel's existing AI Elements, which remains built on useChat and the AI SDK; shadcn recommends the new components only for those wanting the updated abstraction or headless support. A GitHub issue already reports a bug where MessageScroller mount-time anchors aren't applied. Community reaction favors the copy-paste model over traditional component libraries with version lock-in. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What new chat components did shadcn/ui add for building AI conversation interfaces? Shadcn/ui added five new components for the conversation layer: MessageScroller, Message, Bubble, Attachment, and Marker, plus two CSS utilities called scroll-fade and shimmer. MessageScroller is the core scroll container handling anchored turns, streamed replies, saved thread restore, prepended history, and jump-to-message behavior. Install them via the CLI with pnpm dlx shadcn@latest add message-scroller message bubble attachment marker. _Track new shadcn/ui component drops like these on daily.dev before wiring them into a chat interface._ ### Does the new shadcn/ui MessageScroller replace Vercel's AI Elements for chat UIs? No, shadcn was explicit that the new conversation components do not replace AI Elements, and existing users of AI Elements do not need to rewrite anything. Developers should reach for the new shadcn/ui components only if they want the newer abstraction, updated styling, or support for Radix and Base UI, since AI Elements remains built on the AI SDK's useChat hook with over 20 components. _Compare shadcn/ui's chat primitives against AI Elements on daily.dev before picking one for a project._ ### Is there a known bug with shadcn/ui's MessageScroller component? Yes, a GitHub issue reports that MessageScroller mount-time anchors are never applied, and the bug is reproducible using the headless primitives alone from the new @shadcn/react package. This affects the scroll-anchoring behavior meant to keep conversation turns positioned correctly when a chat interface first mounts. _Watch bug reports on new UI libraries like shadcn/ui via daily.dev before shipping them to production._ ## Similar posts on daily.dev - [Shadcn UI adoption guide: Overview, examples, and alternatives](https://daily.dev/posts/shadcn-ui-adoption-guide-overview-examples-and-alternatives-0pr6z5eli) · LogRocket · 1 upvotes · 0 comments - [How to Build an AI Chat App Interface With the Vercel AI SDK and Shadcn/ui](https://daily.dev/posts/how-to-build-an-ai-chat-app-interface-with-the-vercel-ai-sdk-and-shadcn-ui-uvld4e08o) · freeCodeCamp · 1 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#vercel](https://daily.dev/tags/vercel), [#shadcn](https://daily.dev/tags/shadcn) [View this post on daily.dev](https://daily.dev/posts/shadcn-brings-conversational-primitives-to-shadcn-ui-with-new-chat-components-kemwvshut) ```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":"shadcn Brings Conversational Primitives to shadcn/ui with New Chat Components","url":"https://daily.dev/posts/shadcn-brings-conversational-primitives-to-shadcn-ui-with-new-chat-components-kemwvshut","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/shadcn-brings-conversational-primitives-to-shadcn-ui-with-new-chat-components-kemwvshut"},"datePublished":"2026-08-17T11:03:46.743Z","dateModified":"2026-08-24T06:58:05.978Z","description":"shadcn/ui has added new conversational primitives for building chat interfaces, including MessageScroller, Message, Bubble, Attachment, and Marker, plus two...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6a63a64143af0954f07f8b41a091850d?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6a63a64143af0954f07f8b41a091850d?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"InfoQ","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":"InfoQ","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/afc3bced3e1e4b188dd9127017a60e0c","url":"https://daily.dev/sources/infoq"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/shadcn-brings-conversational-primitives-to-shadcn-ui-with-new-chat-components-kemwvshut","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,vercel,shadcn","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"InfoQ","item":"https://daily.dev/sources/infoq"},{"@type":"ListItem","position":3,"name":"shadcn Brings Conversational Primitives to shadcn/ui with New Chat Components"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/shadcn-brings-conversational-primitives-to-shadcn-ui-with-new-chat-components-kemwvshut#faq","mainEntity":[{"@type":"Question","name":"What new chat components did shadcn/ui add for building AI conversation interfaces?","acceptedAnswer":{"@type":"Answer","text":"Shadcn/ui added five new components for the conversation layer: MessageScroller, Message, Bubble, Attachment, and Marker, plus two CSS utilities called scroll-fade and shimmer. MessageScroller is the core scroll container handling anchored turns, streamed replies, saved thread restore, prepended history, and jump-to-message behavior. Install them via the CLI with pnpm dlx shadcn@latest add message-scroller message bubble attachment marker. Track new shadcn/ui component drops like these on daily.dev before wiring them into a chat interface."}},{"@type":"Question","name":"Does the new shadcn/ui MessageScroller replace Vercel's AI Elements for chat UIs?","acceptedAnswer":{"@type":"Answer","text":"No, shadcn was explicit that the new conversation components do not replace AI Elements, and existing users of AI Elements do not need to rewrite anything. Developers should reach for the new shadcn/ui components only if they want the newer abstraction, updated styling, or support for Radix and Base UI, since AI Elements remains built on the AI SDK's useChat hook with over 20 components. Compare shadcn/ui's chat primitives against AI Elements on daily.dev before picking one for a project."}},{"@type":"Question","name":"Is there a known bug with shadcn/ui's MessageScroller component?","acceptedAnswer":{"@type":"Answer","text":"Yes, a GitHub issue reports that MessageScroller mount-time anchors are never applied, and the bug is reproducible using the headless primitives alone from the new @shadcn/react package. This affects the scroll-anchoring behavior meant to keep conversation turns positioned correctly when a chat interface first mounts. Watch bug reports on new UI libraries like shadcn/ui via daily.dev before shipping them to production."}}]} ```