Bubble

Menampilkan isi percakapan dalam gelembung pesan. Mendukung varian, perataan, pengelompokan, reaksi, dan konten yang bisa dilipat.

Hey there! what's up?

Hey! Want to see chat bubbles?

I can group messages, switch sides, and keep the whole thread easy to scan.

👍

Sure. Hit me with your best demo.

Yes. You are reading a demo that is demoing itself. Very meta. Very on-brand.

👍🔥👀+2

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

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Bubble align="end">
      <BubbleContent>Hey there! what&apos;s up?</BubbleContent>
    </Bubble>
    <BubbleGroup>
      <Bubble variant="muted">
        <BubbleContent>Hey! Want to see chat bubbles?</BubbleContent>
      </Bubble>
      <Bubble variant="muted">
        <BubbleContent>
          I can group messages, switch sides, and keep the whole thread easy
          to scan.
        </BubbleContent>
        <BubbleReactions role="img" aria-label="Reaction: thumbs up">
          <span>👍</span>
        </BubbleReactions>
      </Bubble>
    </BubbleGroup>
    <Bubble align="end">
      <BubbleContent>Sure. Hit me with your best demo.</BubbleContent>
    </Bubble>
    <Bubble variant="muted">
      <BubbleContent>
        Yes. You are reading a demo that is demoing itself. Very meta. Very
        on-brand.
      </BubbleContent>
      <BubbleReactions
        role="img"
        aria-label="Reactions: thumbs up, fire, eyes, and 2 more"
      >
        <span>👍</span>
        <span>🔥</span>
        <span>👀</span>
        <span>+2</span>
      </BubbleReactions>
    </Bubble>
  </div>
</template>

Komponen Bubble menampilkan isi percakapan dalam bingkai. Cocok untuk teks chat, keluaran terstruktur singkat, balasan berkutip, saran, dan reaksi.

Untuk antarmuka chat yang lengkap, pakai komponen Message. Bubble memang sengaja dibatasi pada badan gelembungnya saja. Avatar, nama, waktu, metadata, dan aksi tingkat pesan diletakkan di Message.

Instalasi

CLI

npx shadcn-vue@latest add bubble

Manual

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Penggunaan

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

<template>
  <Bubble>
    <BubbleContent>
      I checked the registry output and removed the stale route.
    </BubbleContent>
    <BubbleReactions>
      <span>👍</span>
    </BubbleReactions>
  </Bubble>
</template>

Komposisi

Susunan berikut adalah cara membangun sebuah bubble:

Bubble
├── BubbleContent
└── BubbleReactions

Pakai BubbleGroup untuk mengelompokkan bubble berurutan dari pengirim yang sama:

BubbleGroup
├── Bubble
│   └── BubbleContent
└── Bubble
    └── BubbleContent

Fitur

• Tujuh varian tampilan, dari bubble primary yang tegas sampai konten ghost tanpa bingkai.
• Perataan awal dan akhir untuk bubble pengirim dan penerima.
• Reaksi yang menempel di tepi bubble, dengan sisi dan perataan yang bisa diatur.
• Ukuran bubble menyesuaikan isinya, maksimal 80% dari lebar container.
• Konten polimorfik lewat as atau as-child untuk bubble berupa tautan dan tombol.
• Style tiap bagian bisa disesuaikan lewat prop class.

Contoh

Varian

Pakai variant untuk mengubah tampilan bubble.

This is the default primary bubble.

This is the secondary variant.

This one is muted. It uses a lower emphasis color for the chat bubble.

👍

This one is tinted. The tint is a softer color derived from the primary color.

We can also use an outlined variant.

Or a destructive variant with a reaction.

🔥

Ghost bubbles work for assistant text, markdown, and other content that should not be framed. This is perfect for assistant messages that should not have a frame and can take the full width of the container. You can also render code in it. Ghost bubbles are full width and can take the full width of the container.

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

<template>
  <div class="flex w-full max-w-sm flex-col gap-12 py-12">
    <Bubble>
      <BubbleContent>This is the default primary bubble.</BubbleContent>
    </Bubble>
    <Bubble variant="secondary" align="end">
      <BubbleContent>This is the secondary variant.</BubbleContent>
    </Bubble>
    <Bubble variant="muted">
      <BubbleContent>
        This one is muted. It uses a lower emphasis color for the chat bubble.
      </BubbleContent>
      <BubbleReactions role="img" aria-label="Reaction: thumbs up">
        <span>👍</span>
      </BubbleReactions>
    </Bubble>
    <Bubble variant="tinted" align="end">
      <BubbleContent>
        This one is tinted. The tint is a softer color derived from the
        primary color.
      </BubbleContent>
    </Bubble>
    <Bubble variant="outline">
      <BubbleContent>We can also use an outlined variant.</BubbleContent>
    </Bubble>
    <Bubble variant="destructive" align="end">
      <BubbleContent>Or a destructive variant with a reaction.</BubbleContent>
      <BubbleReactions role="img" aria-label="Reaction: fire">
        <span>🔥</span>
      </BubbleReactions>
    </Bubble>
    <Bubble variant="ghost">
      <BubbleContent>
        Ghost bubbles work for assistant text, <b>markdown</b>, and other content that should not be framed.

        This is perfect for assistant messages that should not have a frame and can take the full width of the container. You can also render <code>code</code> in it.

        Ghost bubbles are full width and can take the full width of the container.
      </BubbleContent>
    </Bubble>
  </div>
</template>

Variant	Description
default	A strong primary bubble, usually for the current user.
secondary	The standard neutral bubble for conversation content.
muted	A lower-emphasis bubble for quiet supporting content.
tinted	A subtle primary-tinted bubble.
outline	A bordered bubble for secondary or rich content.
ghost	Unframed content for assistant text or rich content.
destructive	A destructive bubble for error or failed actions.

Ukuran bubble menyesuaikan isinya, maksimal 80% dari lebar container. Varian ghost melepas batas lebar itu, sehingga teks asisten dan konten kaya bisa memenuhi satu baris penuh.

Perataan

Pakai align pada Bubble untuk menaruhnya di sisi awal atau akhir percakapan.

This bubble is aligned to the start. This is the default alignment.

This bubble is aligned to the end. Use this for user messages.

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

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Bubble variant="muted">
      <BubbleContent>
        This bubble is aligned to the start. This is the default alignment.
      </BubbleContent>
    </Bubble>
    <Bubble align="end">
      <BubbleContent>
        This bubble is aligned to the end. Use this for user messages.
      </BubbleContent>
    </Bubble>
  </div>
</template>

align	Description
start	Align the bubble to the start of the conversation.
end	Align the bubble to the end of the conversation.

Catatan: saat membangun antarmuka chat, align biasanya lebih tepat diatur di komponen Message. Bubble di dalam MessageContent otomatis mengikuti perataan pesannya.

Bubble Group

Pakai BubbleGroup untuk mengelompokkan bubble berurutan dari pengirim yang sama. Perlu dicatat, prop align diatur pada komponen Bubble, bukan pada BubbleGroup.

BubbleGroup
├── Bubble
│   └── BubbleContent
└── Bubble
    └── BubbleContent

Can you tell me what's the issue?

You tell me!

It worked yesterday. You broke it!

Find the bug and fix it.

👀

Want me to diff yesterday's you against today's you? It's a bit embarrassing.

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

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Bubble variant="muted">
      <BubbleContent>Can you tell me what&apos;s the issue?</BubbleContent>
    </Bubble>
    <BubbleGroup>
      <Bubble align="end">
        <BubbleContent>You tell me!</BubbleContent>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>It worked yesterday. You broke it!</BubbleContent>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>Find the bug and fix it.</BubbleContent>
        <BubbleReactions aria-label="Reactions: eyes" align="start">
          <span>👀</span>
        </BubbleReactions>
      </Bubble>
    </BubbleGroup>
    <Bubble variant="muted">
      <BubbleContent>
        Want me to diff yesterday&apos;s you against today&apos;s you?
        It&apos;s a bit embarrassing.
      </BubbleContent>
    </Bubble>
  </div>
</template>

Tautan dan Tombol

Pakai as-child untuk menggabungkan style dan atribut BubbleContent ke tautan atau tombol yang Anda taruh di slot bawaannya.

How can I help you today?

<script setup lang="ts">
import { toast } from 'vue-sonner'
import { Bubble, BubbleContent, BubbleGroup } from '@/components/ui/bubble'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Bubble variant="muted">
      <BubbleContent>How can I help you today?</BubbleContent>
    </Bubble>
    <BubbleGroup>
      <Bubble variant="tinted" align="end">
        <BubbleContent as-child>
          <button type="button" @click="() => toast('You clicked forgot password')">
            I forgot my password
          </button>
        </BubbleContent>
      </Bubble>
      <Bubble variant="tinted" align="end">
        <BubbleContent as-child>
          <button type="button" @click="() => toast('You clicked help with subscription')">
            I need help with my subscription
          </button>
        </BubbleContent>
      </Bubble>
      <Bubble variant="tinted" align="end">
        <BubbleContent as-child>
          <button
            type="button"
            @click="() =>
              toast('You clicked something else. Talk to a human.')"
          >
            Something else. Talk to a human.
          </button>
        </BubbleContent>
      </Bubble>
    </BubbleGroup>
  </div>
</template>

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

<template>
  <Bubble variant="muted">
    <BubbleContent as-child>
      <button type="button">Click here</button>
    </BubbleContent>
  </Bubble>
</template>

Reactions

Pakai BubbleReactions untuk menampilkan reaksi pada bubble, atau tombol aksi cepat. Posisinya diatur lewat side dan align — side="top" menempelkannya di tepi atas. Karena reaksi menumpuk di tepi bubble, sisakan jarak vertikal antar baris; contoh di bawah memakai gap yang lebih besar untuk alasan itu.

I don't need tests, I know my code works.

👍😮

Bold. Fine I'll add some tests. I'll let you know when they're done.

👀🚀+2

Tests passed on the first try. All 142 of them. Looking good!

🎉👏

Are you sure I can run this command?

<script setup lang="ts">
import { toast } from 'vue-sonner'
import { Bubble, BubbleContent, BubbleReactions } from '@/components/ui/bubble'
import { Button } from '@/components/ui/button'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-12 py-12">
    <Bubble variant="muted" align="end">
      <BubbleContent>
        I don&apos;t need tests, I know my code works.
      </BubbleContent>
      <BubbleReactions
        align="start"
        role="img"
        aria-label="Reactions: thumbs up, surprised"
      >
        <span>👍</span>
        <span>😮</span>
      </BubbleReactions>
    </Bubble>
    <Bubble variant="muted">
      <BubbleContent>
        Bold. Fine I&apos;ll add some tests. I&apos;ll let you know when
        they&apos;re done.
      </BubbleContent>
      <BubbleReactions
        role="img"
        aria-label="Reactions: eyes, rocket, and 2 more"
      >
        <span>👀</span>
        <span>🚀</span>
        <span>+2</span>
      </BubbleReactions>
    </Bubble>
    <Bubble variant="default" align="end">
      <BubbleContent>
        Tests passed on the first try. All 142 of them. Looking good!
      </BubbleContent>
      <BubbleReactions
        side="top"
        align="start"
        role="img"
        aria-label="Reactions: party popper, clapping hands"
      >
        <span>🎉</span>
        <span>👏</span>
      </BubbleReactions>
    </Bubble>
    <Bubble variant="destructive">
      <BubbleContent>Are you sure I can run this command?</BubbleContent>
      <BubbleReactions>
        <Button
          variant="ghost"
          size="sm"
          @click="() => toast.success('You clicked yes, running command...')"
        >
          Yes, run it
        </Button>
      </BubbleReactions>
    </Bubble>
  </div>
</template>

Tampilkan Selengkapnya

Isi bubble yang panjang bisa dipadukan dengan Collapsible agar bisa dibuka dan ditutup. Pakai komponen CollapsibleTrigger sebagai pemicunya.

How can I help you today?

The accessibility review found two focus states that were visually too subtle in dark mode. I checked the dialog, menu, and drawer paths because each one renders focusable control...

<script setup lang="ts">
import { ChevronDownIcon } from '@lucide/vue'
import { computed, ref } from 'vue'
import { Bubble, BubbleContent } from '@/components/ui/bubble'
import { Button } from '@/components/ui/button'
import { Collapsible, CollapsibleTrigger } from '@/components/ui/collapsible'

const text = `The accessibility review found two focus states that were visually too subtle in dark mode.

I checked the dialog, menu, and drawer paths because each one renders focusable controls inside a layered surface.

The dialog and drawer are fine. The menu needs the hover and focus tokens split so keyboard focus stays visible when the pointer is not involved.

I also recommend keeping the change in the style file instead of the primitive so the other themes can choose their own focus treatment later.`

const previewLength = 180
const open = ref(false)
const preview = computed(() => `${text.slice(0, previewLength)}...`)
const isLong = computed(() => text.length > previewLength)
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Bubble variant="muted">
      <BubbleContent>How can I help you today?</BubbleContent>
    </Bubble>

    <Bubble variant="muted" align="end">
      <BubbleContent class="whitespace-pre-line">
        <Collapsible v-model:open="open">
          <div>{{ (open || !isLong) ? text : preview }}</div>
          <template v-if="isLong">
            <CollapsibleTrigger as-child>
              <Button variant="link" class="group/collapsible gap-1 p-0 text-muted-foreground">
                {{ open ? "Show less" : "Show more" }}
                <ChevronDownIcon
                  data-icon="inline-end"
                  class="group-data-[state=open]/collapsible:rotate-180 size-4"
                />
              </Button>
            </CollapsibleTrigger>
          </template>
        </Collapsible>
      </BubbleContent>
    </Bubble>
  </div>
</template>

Tooltip

Bungkus bubble dengan Tooltip untuk memunculkan metadata saat di-hover, misalnya kapan pesan itu dibaca.

Did you remove the stale route?

Yes, removed it from the registry.

<script setup lang="ts">
import { CheckIcon } from '@lucide/vue'
import { Bubble, BubbleContent, BubbleReactions } from '@/components/ui/bubble'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4 py-12">
    <Bubble variant="secondary">
      <BubbleContent>Did you remove the stale route?</BubbleContent>
    </Bubble>
    <Bubble align="end">
      <BubbleContent>Yes, removed it from the registry.</BubbleContent>
      <BubbleReactions>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button variant="ghost" size="icon-sm" class="rounded-full">
              <CheckIcon />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Read on Jan 5, 2026 at 4:32 PM</TooltipContent>
        </Tooltip>
      </BubbleReactions>
    </Bubble>
  </div>
</template>

Popover

Padukan bubble dengan Popover untuk memunculkan keterangan tambahan saat diminta, misalnya pesan error lengkap dari aksi yang gagal.

Run the build script.

Failed to run the command.

<script setup lang="ts">
import { InfoIcon } from '@lucide/vue'
import { Bubble, BubbleContent, BubbleReactions } from '@/components/ui/bubble'
import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4 py-12">
    <Bubble align="end">
      <BubbleContent>Run the build script.</BubbleContent>
    </Bubble>
    <Bubble variant="destructive">
      <BubbleContent>Failed to run the command.</BubbleContent>
      <BubbleReactions>
        <Popover>
          <PopoverTrigger as-child>
            <Button variant="ghost" size="icon-sm" aria-label="Show error details" class="aria-expanded:text-destructive rounded-full">
              <InfoIcon />
            </Button>
          </PopoverTrigger>
          <PopoverContent>
            <div class="flex flex-col gap-1 text-sm">
              <div class="text-sm font-medium">
                Command failed with exit code 1
              </div>
              <div class="text-sm text-muted-foreground">
                ENOENT: no such file or directory, open pnpm-lock.yaml
              </div>
            </div>
          </PopoverContent>
        </Popover>
      </BubbleReactions>
    </Bubble>
  </div>
</template>

Aksesibilitas

Bubble hanya menampilkan badan pesannya. Makna di tingkat percakapan sebaiknya tetap dipegang container di sekelilingnya. Ikuti panduan di bawah ini.

Memberi Label pada Reaksi

Reaksi ditampilkan sebagai deretan emoji. Pembaca layar membacakan tiap emoji tanpa konteks, dan penghitung seperti +8 dibaca sebagai "plus delapan". Jadikan deretan itu satu gambar utuh dengan aria-label yang jelas supaya dibacakan sekali saja. role="img" sekaligus menyembunyikan emoji satu per satu dari teknologi bantu, jadi aria-hidden tidak diperlukan.

<BubbleReactions role="img" aria-label="Reactions: thumbs up, fire, and 8 more">
  <span>👍</span>
  <span>🔥</span>
  <span>+8</span>
</BubbleReactions>

Kalau reaksinya bisa diklik, tampilkan sebagai tombol, dan beri aria-label pada tombol yang hanya berupa ikon.

<BubbleReactions>
  <Button aria-label="Thumbs up" variant="secondary" size="icon-xs">
    <ThumbsUpIcon />
  </Button>
</BubbleReactions>

Bubble yang Interaktif

Kalau bubble bisa diklik, teruskan elemen <button> atau <a> sungguhan lewat BubbleContent dengan as-child, supaya bisa di-focus dan punya role yang benar. BubbleContent sudah menyediakan cincin focus yang terlihat untuk elemen interaktif, dan nama aksesibelnya diambil dari teks bubble — tidak perlu label tambahan.

<Bubble variant="muted" align="end">
  <BubbleContent as-child>
    <button type="button" @click="onReply">
      I forgot my password
    </button>
  </BubbleContent>
</Bubble>

Makna yang Tidak Bergantung Warna

Varian bubble menandakan peran dan nada lewat warna. Padukan dengan teks, perataan, atau ikon supaya maknanya tidak bergantung pada warna semata. Untuk bubble destructive, jelaskan konteks error-nya di dalam teks pesan, bukan mengandalkan warnanya.

Referensi API

Semua bagian Bubble menghasilkan <div> secara bawaan. Pakai as untuk memilih elemen lain, atau as-child untuk menggabungkan atribut dan style komponen ke satu elemen atau komponen di dalam slot bawaannya.

Bubble

Pembungkus terluar bubble.

Prop	Type	Default	Description
variant	"default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive"	"default"	The bubble visual treatment.
align	"start" | "end"	"start"	The inline alignment of the bubble.
as	string | Component	"div"	The element or component to render.
as-child	boolean	false	Render the default slot as the root and merge props onto it.
class	string	-	Additional classes to apply to the root element.

BubbleContent

Pembungkus isi bubble.

Prop	Type	Default	Description
as	string | Component	"div"	The element or component to render.
as-child	boolean	false	Render the default slot as the root and merge props onto it.
class	string	-	Additional classes to apply to the content element.

BubbleReactions

Menampilkan reaksi yang menumpuk di tepi bubble.

Prop	Type	Default	Description
side	"top" | "bottom"	"bottom"	The side of the bubble to anchor the reactions.
align	"start" | "end"	"end"	The inline alignment of the reactions.
as	string | Component	"div"	The element or component to render.
as-child	boolean	false	Render the default slot as the root and merge props onto it.
class	string	-	Additional classes to apply to the reaction row.

BubbleGroup

Mengelompokkan bubble berurutan dari pengirim yang sama.

Prop	Type	Default	Description
as	string | Component	"div"	The element or component to render.
as-child	boolean	false	Render the default slot as the root and merge props onto it.
class	string	-	Additional classes to apply to the group root.