Recipe

Message Bubble

A chat-style message component with sender alignment, timestamps, and status indicators.

Preview

Hey! How's the project going?

10:42 AM

Going great! Just shipped the new dashboard.

10:43 AM

Awesome! Can I see a preview?

10:44 AM

Usage

Wrap each message in a flex container with justify-start for received messages or justify-end for sent messages. Use asymmetric border-radius (rounded-bl-md /rounded-br-md) to create the tail effect. Sent messages use the violet brand fill; received messages use a subtle dark tint.