Chat Composer

Component

About

A composable message box for chat UIs — text input, attachments, mention and send actions — built from headless parts that share one draft so each chat surface can wire its own layout and state.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chat Composer to your project and fits it to your theme.

Code

How Chat Composer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import {
  ChatComposerAttachments,
  ChatComposerCommonActions,
  ChatComposerFooter,
  ChatComposerFrame,
  ChatComposerInput,
  ChatComposerSubmit,
  LocalChatComposerProvider,
} from "@/components/ui/chat-composer";

export default function ChatComposerDemo() {
  return (
    <div className="flex w-full max-w-md items-center justify-center p-8">
      <LocalChatComposerProvider
        onSubmit={({ value, attachments }) => {
          console.log("send", value, attachments);
        }}
      >
        <ChatComposerFrame>
          <ChatComposerInput placeholder="Message..." />
          <ChatComposerAttachments className="px-3 pb-2" />
          <ChatComposerFooter>
            <ChatComposerCommonActions />
            <ChatComposerSubmit />
          </ChatComposerFooter>
        </ChatComposerFrame>
      </LocalChatComposerProvider>
    </div>
  );
}