Changelog

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

You can now turn any public GitHub repository into a registry.

Add a registry.json file at the root of the repository, define the items you want to distribute, and users can install them directly from GitHub with the shadcn CLI.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add <username>/<repo>/<item>
Copy

For example, to install the project-conventions item from the acme/toolkit repository:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add acme/toolkit/project-conventions
Copy

GitHub registries are source registries. You do not need to run shadcn build, publish generated item JSON files or set up a registry server. The CLI reads the root registry.json, resolves include entries, finds the requested item and installs the files declared by that item.

Distribute anything#

Registry items are not limited to components. A GitHub registry can distribute components, hooks, utilities, design tokens, feature kits, project conventions, agent instructions, testing setup, CI workflows, release workflows, templates, codemods, migration kits and other project files.

For example, a repository can expose a project-conventions item that installs shared docs, editor settings and agent instructions:

Copy{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme-toolkit",
  "homepage": "https://github.com/acme/toolkit",
  "items": [
    {
      "name": "project-conventions",
      "type": "registry:item",
      "files": [
        {
          "path": "AGENTS.md",
          "type": "registry:file",
          "target": "~/AGENTS.md"
        },
        {
          "path": ".editorconfig",
          "type": "registry:file",
          "target": "~/.editorconfig"
        },
        {
          "path": "docs/conventions.md",
          "type": "registry:file",
          "target": "~/docs/conventions.md"
        }
      ]
    }
  ]
}

Commands#

GitHub registry addresses work with the same commands as other registry addresses.

List items from a GitHub registry:

pnpmnpmyarnbun
pnpm dlx shadcn@latest list acme/toolkit
Copy

Search items:

pnpmnpmyarnbun
pnpm dlx shadcn@latest search acme/toolkit --query conventions
Copy

View an item:

pnpmnpmyarnbun
pnpm dlx shadcn@latest view acme/toolkit/project-conventions
Copy

Install an item:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add acme/toolkit/project-conventions
Copy

See the GitHub Registries docs for the full guide.

When we added support for both Radix and Base UI, we needed a place for shared Tailwind utilities that both libraries depend on, e.g. custom variants like data-open: and data-closed: and utilities like no-scrollbar.

We also ran into a few bugs while working on RTL support that were easier to fix in one shared place rather than duplicating across every component.

So we created shadcn/tailwind.css. When you run init, it adds @import "shadcn/tailwind.css" to your global CSS file. It works just like other CSS imports such as tw-animate-css: a small dependency that is tree-shaken in production and resolved at build time.

If you prefer not to depend on the shadcn package for that CSS, we've added the shadcn eject command. It inlines shadcn/tailwind.css into your global CSS file and removes the shadcn dependency from your project.

pnpmnpmyarnbun
pnpm dlx shadcn@latest eject
Copy

Before

Copy@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

After

Copy@import "tailwindcss";
@import "tw-animate-css";
/* ejected from shadcn@4.8.3 */
@theme inline {
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(
        --radix-accordion-content-height,
        var(--accordion-panel-height, auto)
      );
    }
  }
}
 
@custom-variant data-open {
  &:where([data-state="open"]),
  &:where([data-open]:not([data-open="false"])) {
    @slot;
  }
}

In a monorepo, run the command from the workspace that contains your components.json and global CSS file:

pnpmnpmyarnbun
pnpm dlx shadcn@latest eject -c packages/ui
Copy

See the CLI documentation for more details.

Introducing Rhea, a new shadcn/ui style. A more compact Luma. Smaller spacing. Denser surfaces. Built for focused product interfaces.

Try Rhea in shadcn/create

Rhea started from a simple request we've heard a lot: Luma, but more compact. We looked at how people were using the new styles and what they were asking for, and the pattern was clear. A lot of teams wanted the softness and shape of Luma with tighter spacing, smaller controls, and more information density.

Rhea keeps the same rounded foundation, but makes it more compact for product interfaces where space matters. Buttons, inputs, menus, cards, and lists all sit a little tighter so the UI can carry more without feeling crowded.

Why a new style?#

We considered making this a spacing tweak for Luma, but --spacing is a multiplier. Changing it would change what familiar utilities mean across your app. p-2, w-4, and m-16 would no longer mean the same size.

That tradeoff felt wrong. Compactness should not force you to relearn Tailwind's spacing scale or wonder whether a utility means something different in one style than another.

So Rhea is a new style instead. It lets us adjust component sizes, gaps, and density directly while keeping the underlying utility scale predictable.

Available now in shadcn/create for both Radix and Base UI.

This release adds two updates for registry authors:

• include for composing large source registries from multiple registry.json files.
• shadcn registry validate for checking source registries before publishing.

This makes it easier to maintain source and dynamic registries without keeping one large registry.json file by hand.

Registry authors can now organize a large source registry across multiple registry.json files and compose them with shadcn build.

Copyregistry.json
components
└── ui
    ├── button.tsx
    ├── input.tsx
    └── registry.json
hooks
├── registry.json
├── use-media-query.ts
└── use-toggle.ts

Copy{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "include": [
    "components/ui/registry.json",
    "hooks/registry.json"
  ]
}

Included registry.json files are valid registry files for composition and may omit name and homepage. Only the root registry.json must define the registry metadata.

Copy{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "items": [
    {
      "name": "button",
      "type": "registry:ui",
      "files": [
        {
          "path": "button.tsx",
          "type": "registry:ui"
        }
      ]
    }
  ]
}

Build output#

shadcn build resolves included registries and writes a flattened registry.json without include. Item file paths are preserved from the root registry, so a file declared in components/ui/registry.json is written as components/ui/button.tsx in the built registry item.

Validate your registry#

You can now validate a source registry before publishing or serving it.

pnpmnpmyarnbun
pnpm dlx shadcn registry validate
Copy

Validation runs against the source registry files directly. You do not need to run shadcn build first.

The command checks the root registry.json, included registry files, item schema errors, duplicate item names, include rules, and local item file paths. Validation reports all actionable errors it can find in one run.

Registry loaders#

The shadcn/registry package also exports loadRegistry and loadRegistryItem for dynamic registry routes.

Copyimport { loadRegistry } from "shadcn/registry"
 
export async function GET() {
  const registry = await loadRegistry()
 
  return Response.json(registry)
}

Copyimport { loadRegistryItem } from "shadcn/registry"
 
export async function GET(
  _: Request,
  { params }: { params: Promise<{ name: string }> }
) {
  const { name } = await params
  const item = await loadRegistryItem(name)
 
  return Response.json(item)
}

See the registry.json documentation and getting started guide for more details.