snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/content/docs/changelog/2026-06-chat-components.mdx

@@ -0,0 +1,117 @@
+---
+title: June 2026 - Components for Chat Interfaces
+description: MessageScroller, Message, Bubble, Attachment, and Marker. Components for building chat interfaces.
+date: 2026-06-26
+---
+
+<ComponentPreview
+  styleName="radix-rhea"
+  name="message-scroller-demo"
+  className="rounded-[34px] sm:rounded-4xl"
+  previewClassName="h-auto theme-blue bg-surface dark:bg-background p-4 min-[480px]:p-8 min-[560px]:p-10 sm:px-10 sm:py-16"
+/>
+
+Today, we’re releasing a new set of components for building chat interfaces:
+[**MessageScroller**](/docs/components/message-scroller),
+[**Message**](/docs/components/message), [**Bubble**](/docs/components/bubble),
+[**Attachment**](/docs/components/attachment), and
+[**Marker**](/docs/components/marker).
+
+This is the first phase of the chat components work. We’re taking it one piece at a time, reimagining the abstraction behind each part, and shipping them as shadcn/ui components you can copy, compose, and adapt to your product.
+
+We are starting with the conversation layer: scrolling, message rows, bubbles, attachments, and markers.
+
+We asked ourselves: what makes a great streaming chat experience? Then we abstracted the core rules into a set of primitives: `MessageScroller`.
+
+```bash
+npx shadcn@latest add message-scroller message bubble attachment marker
+```
+
+## MessageScroller
+
+`MessageScroller` is the scroll container for a conversation. It handles the
+parts that are easy to get wrong: anchored turns, streamed replies, saved thread
+restore, prepended history, jump-to-message, scroll controls, and visibility
+tracking.
+
+`MessageScroller` owns that behavior without owning your messages, AI state,
+transport, persistence, or model state. You bring the content renderer.
+
+The `MessageScroller` is also available as an unstyled headless component in `@shadcn/react`.
+
+## Message, Bubble, Attachment, and Marker
+
+The rest of the components cover the everyday pieces you need around the
+scroller.
+
+- `Message` lays out a row in the conversation with avatar, alignment, header,
+  content, footer, and grouped messages.
+- `Bubble` renders the message surface, with variants, alignment, reactions,
+  links, buttons, and collapsible content.
+- `Attachment` renders files and images with media, metadata, upload state,
+  actions, and a full-card trigger that keeps actions separately clickable.
+- `Marker` renders status updates, system notes, bordered rows, and labeled
+  separators for things like streaming state, tool activity, and date breaks.
+
+They are intentionally small. Compose them together for AI chats, support
+inboxes, team threads, group chats, and product-specific conversations.
+
+## scroll-fade and shimmer
+
+We also added two new CSS utilities for the details that make chat interfaces
+feel better.
+
+[`scroll-fade`](/docs/utils/scroll-fade) adds scroll-aware edge fades to scroll
+containers. Use it on `MessageScroller`, `ScrollArea`, attachment rows, and any
+long list where you want to hint at more content without adding overlays or
+scroll listeners.
+
+<ComponentPreview
+  styleName="radix-rhea"
+  name="scroll-fade-demo"
+  previewClassName="h-auto"
+/>
+
+[`shimmer`](/docs/utils/shimmer) adds a text shimmer for live status. Use it
+for things like "Thinking…", "Generating response…", running tools, and
+streaming markers.
+
+<ComponentPreview styleName="radix-rhea" name="shimmer-demo" />
+
+Both utilities ship with `shadcn/tailwind.css`, so projects initialized with
+`npx shadcn@latest init` already have them.
+
+## @shadcn/react
+
+We also created `@shadcn/react`, a new package for unstyled, headless React
+components.
+
+The first primitive is `@shadcn/react/message-scroller`. The registry component
+wraps it with shadcn/ui styles, but the scroll behavior lives in the package:
+anchoring, auto-follow, prepend preservation, scroll commands, and visibility.
+
+This lets us ship behavior without locking it to a visual style. You still get
+copy-and-paste components that match your project, and the hard interaction
+logic stays tested in one place.
+
+Available now for Radix and Base UI.
+
+## AI Elements
+
+This does not replace [AI Elements](https://ai-sdk.dev/elements/overview). You
+can keep using AI Elements for AI interface components and patterns. This
+release is about bringing the core pieces of chat into shadcn/ui, one component
+at a time.
+
+If you are already using a component from AI Elements, you do not need to
+rewrite your app. Keep what works. Try the shadcn/ui version when you want the
+newer abstraction, the updated styling, or support across Radix and Base UI.
+
+The goal is to make these pieces easy to adopt independently. Replace one part,
+compose it with what you already have, and keep building.
+
+<Button asChild size="sm">
+  <Link href="/docs/components" className="mt-6 no-underline!">
+    View Components
+  </Link>
+</Button>