Glass Message

Component 1

About

A chat message bubble with an Apple-style liquid glass surface, supporting user/assistant alignment, avatars, names, footers, and a typing indicator.

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

Code

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

Usage.tsx

"use client";

import {
  GlassMessage,
  GlassMessageContent,
  GlassMessageList,
  GlassMessageTyping,
} from "@/components/ui/glass-message";

export default function GlassMessageDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center rounded-xl bg-gradient-to-br from-background via-muted to-background p-6">
      <GlassMessageList className="w-full max-w-md">
        <GlassMessage avatar="AI" name="Assistant">
          <GlassMessageContent>How can I help?</GlassMessageContent>
        </GlassMessage>
        <GlassMessage from="user" footer="Read">
          <GlassMessageContent>Plan a weekend in Kyoto.</GlassMessageContent>
        </GlassMessage>
        <GlassMessageTyping />
      </GlassMessageList>
    </div>
  );
}