StorybookGitHub

Bubble

A chat message bubble with alignment, color variants, and an optional reactions badge.

I checked the registry output and removed the stale route.
Nice catch. Ship it whenever you are ready.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/bubble.json

Usage

Use bubble to render chat messages, aligning your own messages to the end and incoming ones to the start. BubbleGroup stacks consecutive bubbles from the same sender, and BubbleReactions overlays a small badge of emoji reactions on a corner of the bubble.

<script setup lang="ts">
import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "@/components/ui/bubble";
</script>

<template>
  <BubbleGroup>
    <Bubble align="start" variant="muted">
      <BubbleContent>Hey, how's the launch going?</BubbleContent>
    </Bubble>
    <Bubble align="end" variant="default">
      <BubbleContent>Smoothly — shipping the last components now.</BubbleContent>
      <BubbleReactions>👍</BubbleReactions>
    </Bubble>
  </BubbleGroup>
</template>

Use variant="ghost" for plain text bubbles without a background, or variant="destructive" to flag a failed or deleted message.