Message

User bubbles and serif assistant replies with slots for search, sources and actions.

import { ClaudeMessage } from "../components/claude-message";
import { ClaudeSources } from "../components/claude-sources";

export default function ClaudeMessageExample() {
  return (
    <div className="bg-claude-bg flex w-[calc(100vw-3rem)] max-w-full flex-col gap-8 p-6">
      <ClaudeMessage from="user">what's in the news today</ClaudeMessage>
      <ClaudeMessage
        from="assistant"
        sources={
          <ClaudeSources
            sources={[
              {
                domain: "reuters.com",
                href: "https://www.reuters.com/world/",
                title: "Reuters: World news for Tuesday, September 29",
              },
            ]}
          />
        }
      >
        European markets open higher after strong US tech earnings, while the
        debate over AI Act enforcement heats up.
      </ClaudeMessage>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-message

With from="user" the message is a warm gray bubble aligned to the end, at most 70% wide. With from="assistant" it is full-width serif text. The search slot renders above the reply. The sources slot renders inside the reply text, after the answer. The actions slot fades in when the message is hovered or focused, and stays visible on touch screens.

Prop	Default	Description
`from`		`user` or `assistant`.
`search`		Assistant only. Usually a Search.
`sources`		Assistant only. Usually Sources, rendered inside the reply.
`actions`		Usually Actions.

Used in

Claude

A full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker.