Message composer

A white rich text composer: a text style menu that pours open, formatting that lights up under the caret, @ mentions, emoji, uploading thumbnails, a voice note timer, an AI polish, scheduled sending with a calendar, and a split send button whose plane flies off. The writing area grows with a spring as you write.

Forms, type, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/message-composer.tsx https://motion-brew.com/r/message-composer.tsx

One self contained file for React and Tailwind CSS: message-composer.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { MessageComposer } from "@/components/message-composer";

export default function Thread() {
  return (
    <MessageComposer
      people={team}
      onSend={(message) => api.post(channelId, message)}
      onUpload={(file, progress) => uploadFile(file, progress)}
      onEnhance={(text) => ai.rewrite(text)}
    />
  );
}

Props

Prop	Type	Default	Description
defaultValue	string	""	Starting text; lines become paragraphs, @id a chip
placeholder	string	a short hint	Shown while the message is empty
people	ComposerPerson[]	five sample people	Offered after typing @ (id, name, title, avatar)
defaultAttachments	ComposerAttachment[]	[]	Upload when the composer comes into view
toolbar	boolean	true	Show the formatting toolbar at first
maxHeight	number	240	The writing area grows up to this, then scrolls
onSend	(message) => void \	Promise		Gets html, text, mentions, attachments, mode, and sendAt when scheduled
onUpload	(file, progress) => Promise<void>	pretends to upload	Report progress from 0 to 1
onEnhance	(text) => string \	Promise<string>	tidies the text	The AI button; mentions come and go as @id
onVideo	() => void	adds a sample clip	The video button
onChange	(text) => void		The message as plain text
className	string		Placement and width

More forms

OTP code: A one time code card with split boxes and no confirm button.
Auth card: Sign in and sign up in one card.
File drop: A drag and drop uploader.
Voice prompt: An AI composer you can talk to.

All animated react form components