MessageFreev1.0.0
One message in a chat: the assistant writes on the page beside its mark, the person's words sit in a quiet bubble, system notes are centred. Name and time, copy and retry, a failed send that says so, a streaming caret, and a content slot that styles your rendered markdown.
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-message.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-message.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (Source below, or save them all as a .zip)
- components/ui/lumen/controls/message.tsx
- lib/beautiful-ui/core/chat.ts
- 3. Paste styles.css into your global CSS, after @import "tailwindcss";
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), Avatar, Button, Clipboard Button, the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Always show actions
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import {
Message,
MessageActions,
MessageAvatar,
MessageBody,
MessageContent,
MessageCopy,
MessageHeader,
MessageRetry,
} from "@/components/ui/lumen/controls/message";
export function Reply({ text, sentAt, onRegenerate }: { text: string; sentAt: Date; onRegenerate: () => void }) {
return (
<div className="flex flex-col gap-5">
<Message from="user">
<MessageBody>
<MessageContent>Summarise the incident report in three bullets.</MessageContent>
</MessageBody>
</Message>
<Message from="assistant">
<MessageAvatar name="Assistant" />
<MessageBody>
<MessageHeader name="Assistant" time={sentAt} />
<MessageContent>{text}</MessageContent>
<MessageActions>
<MessageCopy value={text} />
<MessageRetry onClick={onRegenerate} />
</MessageActions>
</MessageBody>
</Message>
</div>
);
}Props
from"assistant""user" | "assistant" | "system"Who wrote it. The person's words sit in a bubble on the far side; system notes are centred.
status"sent""sent" | "sending" | "error" | "streaming"sending dims the text and says Sending…; error shows Not sent with Retry (MessageActions onRetry); streaming adds a caret (three cells while empty) and aria-busy.
groupedfalsebooleanA follow-up from the same author: tighter, and its bubble corner meets the one above.
actions"hover""hover" | "always"When the actions row shows. Hover also means focus, and touch screens always show it.
labels–Partial<MessageLabels>copy, copied, retry, sending, failed: for other languages.
MessageAvatar name / src–stringInitials from the name, the photo when it loads. Or pass your own children.
Show all 10 propsShow fewer
MessageHeader name / time / locale / timeZone–ReactNode / Date | number | stringThe name and the time of day (the full date in its title). Fix timeZone so server and browser agree.
MessageContent–ReactNodeText keeps its line breaks; rendered markdown (p, lists, code, pre, links, quotes, tables) is styled for chat. Never set raw HTML here.
MessageActions onRetry–() => voidOn a failed message: the Retry beside Not sent.
MessageCopy value / MessageRetry onClick / MessageAction label icon–…Copy (Clipboard Button), ask again, or your own icon action (the label is its name and title).
Source
components/ui/lumen/controls/message.tsx
