Message

AI chats 48

About

Here is Message component

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

Code

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

Usage.tsx

import {
  Message,
  MessageContent,
  MessageAvatar,
} from '@/components/ui/message';

export default function DemoOne() {
  return (
    <div className="flex flex-col gap-4 p-4">
      {/* User Message */}
      <Message from="user">
        <MessageContent>
          Hello! Can you tell me what the current time is in Yieldry?
        </MessageContent>
        <MessageAvatar
          src="https://cdn.21st.dev/assets/mirror/51/513d06f542692036ff0bb17938f04b3efd60567ba2cae08049469d21f18e0524.jpg"
          name="User"
        />
      </Message>

      {/* Assistant Message */}
      <Message from="assistant">
        <MessageContent>
          Of course! As of our conversation, the current time in Yieldry, Urenso is approximately 12:18 PM.
        </MessageContent>
        <MessageAvatar
          src="https://cdn.21st.dev/assets/mirror/75/750f6ec055e825533be5a5f62844312beeb7f41870eac9fa7d1e168f9f352246.png"
          name="AI"
        />
      </Message>
    </div>
  );
}