Chat Bubble — uicraft

Basic

Incoming and outgoing message bubbles.

html

A

Hey! How are you doing?

10:24 AM

I'm great, thanks! Working on the new project.

10:25 AM

A

That sounds exciting! Can you share some details?

10:26 AM

<div class="uc-flex uc-items-end uc-gap-2">
  <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-neutrals-muted">A</div>
  <div class="uc-bg-neutrals-muted uc-rounded-2xl uc-px-4 uc-py-3">
    <p class="uc-text-sm">Hey! How are you?</p>
  </div>
</div>
<div class="uc-flex uc-items-end uc-gap-2 uc-justify-end">
  <div class="uc-bg-accents-blue uc-text-constant-white uc-rounded-2xl uc-px-4 uc-py-3">
    <p class="uc-text-sm">I'm great, thanks!</p>
  </div>
</div>

With Avatar & Name

Messages with user names for group context.

html

S

Sarah

Did you see the latest design mockups?

I think the header needs some work

Yes! I'll take a look right now

<div class="uc-flex uc-items-end uc-gap-2">
  <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue/20 uc-flex uc-items-center uc-justify-center">
    <span class="uc-text-xs uc-font-semibold uc-text-accents-blue">S</span>
  </div>
  <div>
    <p class="uc-text-xs uc-font-medium uc-text-fg-disabled uc-mb-1 uc-ml-1">Sarah</p>
    <div class="uc-bg-neutrals-muted uc-rounded-2xl uc-rounded-bl-md uc-px-4 uc-py-3">
      <p class="uc-text-sm">Did you see the latest design mockups?</p>
    </div>
  </div>
</div>

With Status

Message delivery status indicators.

html

Meeting at 3pm?

10:30 AM

I'll bring the documents

10:31 AM

See you there!

Sending...

<div class="uc-flex uc-items-end uc-gap-2 uc-justify-end">
  <div>
    <div class="uc-bg-accents-blue uc-text-constant-white uc-rounded-2xl uc-rounded-br-md uc-px-4 uc-py-3">
      <p class="uc-text-sm">Meeting at 3pm?</p>
    </div>
    <div class="uc-flex uc-items-center uc-gap-1 uc-mt-1 uc-justify-end uc-mr-1">
      <p class="uc-text-[10px] uc-text-fg-disabled">10:30 AM</p>
      <svg>...</svg>
    </div>
  </div>
</div>

Typing Indicator

Animated dots showing that someone is typing.

html

J

Let me check that for you...

J

<div class="uc-flex uc-items-end uc-gap-2">
  <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-neutrals-muted uc-flex uc-items-center uc-justify-center">
    <span class="uc-text-xs uc-font-semibold uc-text-fg-disabled">J</span>
  </div>
  <div class="uc-bg-neutrals-muted uc-rounded-2xl uc-rounded-bl-md uc-px-4 uc-py-3">
    <div class="uc-flex uc-gap-1 uc-items-center">
      <span class="typing-dot uc-w-2 uc-h-2 uc-rounded-full uc-bg-fg-disabled"></span>
      <span class="typing-dot uc-w-2 uc-h-2 uc-rounded-full uc-bg-fg-disabled"></span>
      <span class="typing-dot uc-w-2 uc-h-2 uc-rounded-full uc-bg-fg-disabled"></span>
    </div>
  </div>
</div>

Group Chat

Multiple participants with different colored avatars.

html

A

Alice

Team standup in 5 minutes!

B

Bob

On my way!

I'll join from my desk

C

Carol

Same here, ready when you are

<div class="uc-flex uc-items-end uc-gap-2">
  <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue/20 uc-flex uc-items-center uc-justify-center">
    <span class="uc-text-xs uc-font-semibold uc-text-accents-blue">A</span>
  </div>
  <div>
    <p class="uc-text-xs uc-font-medium uc-text-fg-disabled uc-mb-1 uc-ml-1">Alice</p>
    <div class="uc-bg-neutrals-muted uc-rounded-2xl uc-rounded-bl-md uc-px-4 uc-py-3">
      <p class="uc-text-sm">Team standup in 5 minutes!</p>
    </div>
  </div>
</div>
<div class="uc-flex uc-items-end uc-gap-2">
  <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue/20 uc-flex uc-items-center uc-justify-center">
    <span class="uc-text-xs uc-font-semibold uc-text-accents-blue">B</span>
  </div>
  <div>
    <p class="uc-text-xs uc-font-medium uc-text-fg-disabled uc-mb-1 uc-ml-1">Bob</p>
    <div class="uc-bg-neutrals-muted uc-rounded-2xl uc-rounded-bl-md uc-px-4 uc-py-3">
      <p class="uc-text-sm">On my way!</p>
    </div>
  </div>
</div>