Chat Message
One chat turn: a user bubble on the right or an assistant reply with an avatar, light formatting for bold and inline code, and copy, retry and feedback actions that appear on hover.
- Category: AI
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Chat Message
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
role | "user" | "assistant" | "assistant" | |
name | string | "Assistant" | |
avatar | string | — | |
children | ReactNode | — | Strings render **bold**, `code` and line breaks. |
time | string | — | |
status | "sending" | "sent" | "error" | "sent" | |
actions | boolean | true | |
onRetry | () => void | — | |
onFeedback | (value: "up" | "down" | null) => void | — |
About Chat Message
Chat Message renders one turn of a conversation: the user's bubble on the right, or the assistant's reply with an avatar and light formatting for bold and inline code. Copy, retry and feedback actions appear on hover, so the thread stays calm until you need them.
Chat Message is an AI interface component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Chat Message
- Assistant and copilot chat threads.
- Customer support conversations.
- Agent transcripts with retry on failure.
- Feedback collection on AI answers.
How it works
Formatting is parsed in the file, with no markdown library, so it stays small. Actions are real buttons that show on hover and on keyboard focus, and the status prop marks streaming and failed turns for screen readers.
Streaming and status changes go through live regions, every action is a labelled button that works from the keyboard, and decorative motion stops for people who prefer reduced motion. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Chat Message
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change name, actions, status live, and the Code tab updates to match, so the snippet you copy already carries your values.
- role ("user" | "assistant", default "assistant").
- name (string, default "Assistant").
- avatar (string).
- time (string).
- status ("sending" | "sent" | "error", default "sent").
- actions (boolean, default true).
Goes well with Chat Message
These ai pieces share its tokens and motion language, so they sit together on one page without clashing.
- Typing Indicator: A React typing indicator: a bubble with rippling dots that tells screen readers who is typing
- Thinking Orb: A React AI thinking orb with nine motions for nine kinds of busy
- AI Prompt Input: An animated React AI chat input: growing field, attachments, model picker and a stop button
- Voice Input: A React voice input: the mic expands into a live waveform with a timer and cancel
- Message Scroller: A React chat viewport that follows streaming text and lets go when you scroll up
Install Chat Message
npx shadcn@latest add https://charcoalui.com/r/chat-message.jsonChat Message is free and MIT licensed. The command copies chat-message.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
Charcoal UI Pro adds 393 more showpiece components, 112 sections and 100 templates built the same way.
Frequently asked questions
- How do I install Chat Message?
- Run npx shadcn@latest add https://charcoalui.com/r/chat-message.json. The shadcn CLI copies chat-message.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Chat Message free for commercial use?
- Yes. Chat Message is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Chat Message work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Chat Message?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Chat Message's props and source and get_install_command returns the exact command.