---
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>
