User Message

AI chats 12

About

Right-aligned user chat bubble. Renders text, image previews, and non-image file attachments from a UIMessage payload. Self-contained port from 21st.dev Agent Elements.

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

Code

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

Usage.tsx

import { UserMessage } from "@/components/ui/user-message";

export default function Demo() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
      <div className="w-full max-w-md">
        <UserMessage
          message={{
            id: "msg-1",
            parts: [{ type: "text", text: "Share the latest status." }],
          }}
        />
      </div>
    </div>
  );
}