Conversation
Conversation started
A
Assistant
Hello! How can I help you today?
09:41
Y
You
Can you explain claymorphism?
09:42
A
Assistant
Sure! Claymorphism is a UI design trend that uses soft 3D-like shadows, rounded corners, and translucent backgrounds to give elements a tactile, clay-like feel.
09:42
Y
You
That sounds cool. How is it different from glassmorphism?
09:43
Variants
B
Bot
I'm the bot variant — aligned left with a gray avatar.
U
User
I'm the user variant — aligned right with a brand avatar.
System message — centered, no avatar.
Message Status
Status icons appear next to the timestamp on user messages.
Y
You
Sent (single checkmark)
10:00
Y
You
Delivered (double checkmark)
10:01
Y
You
Read (double blue checkmark)
10:02
Usage
Import from the display package. Children become the message text. Use Avatar for an image URL; omit for initials.
@display.ChatBubble(display.ChatBubbleProps{
Variant: "user", // "bot" | "user" | "system"
Name: "You", // shown above bubble
Time: "09:41", // shown below bubble (optional)
Status: "read", // "sent" | "delivered" | "read" (user only)
Avatar: "", // image URL; empty → initials
}) {
Hello! How can I help?
}