June 2026 - Components for Chat Interfaces

"use client"

import { useChat } from "@ai-sdk/react"

Today, we’re releasing a new set of components for building chat interfaces: MessageScroller, Message, Bubble, Attachment, and 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.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add message-scroller message bubble attachment marker
Copy

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

export function ScrollFadeDemo() {
  return (
    <div className="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">

shimmer adds a text shimmer for live status. Use it for things like "Thinking…", "Generating response…", running tools, and streaming markers.

export function ShimmerDemo() {
  return (
    <p className="shimmer text-sm text-muted-foreground">

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