Bubble

A chat bubble for displaying messages in a conversation.

Hey! Are we still on for the demo tomorrow?

Yes, 10am works for me.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/bubble.json

Usage

import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble";

<BubbleGroup className="w-full max-w-md">
  <Bubble align="start" variant="secondary">
    <BubbleContent>
      Hey! Are we still on for the demo tomorrow?
    </BubbleContent>
  </Bubble>
  <Bubble align="end">
    <BubbleContent>Yes, 10am works for me.</BubbleContent>
  </Bubble>
</BubbleGroup>

With Reactions

Attach a reactions pill to the bottom of a bubble.

Nice work on the release!

🎉 2