Message Header Footer

A chat message layout that pairs a sender name header or a "read/timestamp" footer with a message bubble, for building messaging and chat UIs.

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

import MessageHeaderFooter from "@/components/ui/message-header-footer";

export default function MessageHeaderFooterDemo() {
  return (
    <div className="w-full max-w-md rounded-xl border bg-card p-6">
      <MessageHeaderFooter />
    </div>
  );
}