Components / Chat

Bubble

A chat bubble and what a message can carry: text, a link preview, a file, a sticker, a timestamp and reactions.

Install — needs @hiip registered in components.json

bunx shadcn@latest add @hiip/bubble

Or by URL, with the token in the query

bunx shadcn@latest add "https://ui.hiip.ai/r/bubble.json?token=$HIIP_REGISTRY_TOKEN"

Both need a token — set one up.

Anatomy

Import from components/ui/hiip-ui/bubble.

<BubbleGroup>
  <Bubble variant="received">
    <BubbleContent>
      {/* text, or one of the parts below */}
      <BubbleLink href="…" media={…} site="…" title="…" description="…" />
      <BubbleFile icon={…} name="…" meta="…" action={…} />
      <BubbleTime dateTime="…">…</BubbleTime>
    </BubbleContent>
    <BubbleReactions>👍</BubbleReactions>
  </Bubble>

  <Bubble align="end">
    <BubbleSticker>
      {/* a sticker or emoji, instead of BubbleContent */}
    </BubbleSticker>
  </Bubble>
</BubbleGroup>

Examples

Shipping address confirmed?

Yes — sending it over now.09:42

👍

sample-document-with-a-long-filename.pdfPDF · 1004.3 KB

6 days ago

https://example.com/media/0000000000000000000

example.comWatch the campaign cutA 30-second edit for the brand channel, ready to re-upload.

🎉a month ago

function BubbleDemo() {
  return (
    <BubbleGroup className="w-full max-w-sm">
      <Bubble variant="received">
        <BubbleContent>Shipping address confirmed?</BubbleContent>
      </Bubble>

      <Bubble variant="sent" align="end">
        <BubbleContent>
          Yes — sending it over now.
          <BubbleTime dateTime="2026-09-14T09:42">09:42</BubbleTime>
        </BubbleContent>
        {/* No `align`: it follows the bubble, so the badge hangs on the side
            facing the thread rather than out at the margin. */}
        <BubbleReactions>👍</BubbleReactions>
      </Bubble>

      <Bubble variant="sent" align="end">
        <BubbleContent>
          <BubbleFile
            icon={<DocIcon />}
            name="sample-document-with-a-long-filename.pdf"
            meta="PDF · 1004.3 KB"
            action={
              <button
                type="button"
                aria-label="Download sample-document-with-a-long-filename.pdf"
                className="flex size-9 items-center justify-center rounded-full bg-foreground text-background"
              >
                <svg
                  viewBox="0 0 24 24"
                  className="size-4 fill-current"
                  role="img"
                >
                  <title>Download</title>
                  <path d="M12 3v10.6l3.3-3.3 1.4 1.4L12 17.4l-4.7-5.7 1.4-1.4 3.3 3.3V3zM5 19h14v2H5z" />
                </svg>
              </button>
            }
          />
          <BubbleTime dateTime="2026-09-08">6 days ago</BubbleTime>
        </BubbleContent>
      </Bubble>

      <Bubble variant="received">
        <BubbleContent>
          <BubbleLink
            href="https://example.com/media/0000000000000000000"
            media={<PlayPlate />}
            site="example.com"
            title="Watch the campaign cut"
            description="A 30-second edit for the brand channel, ready to re-upload."
          />
        </BubbleContent>
      </Bubble>

      <Bubble align="end">
        <BubbleSticker>
          <span className="block p-4 text-5xl leading-none">🎉</span>
          <BubbleTime dateTime="2026-08-14">a month ago</BubbleTime>
        </BubbleSticker>
      </Bubble>
    </BubbleGroup>
  );
}

API Reference

Generated from the source. Props forwarded to the underlying element are not listed.

BubbleGroup

No props of its own.

Bubble

Prop	Type	Default
`align`	`"start" \| "end" \| undefined`	`"start"`
`variant`	`"default" \| "secondary" \| "muted" \| "sent" \| "received" \| "tinted" \| "outline" \| "ghost" \| "destructive" \| null \| und…`	`"default"`

BubbleContent

Prop	Type	Default
`render` Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}> \| undefined`	—

BubbleReactions

Prop	Type	Default
`align` `auto` follows the bubble's own side.	`"start" \| "end" \| "auto" \| undefined`	`"auto"`
`side`	`"top" \| "bottom" \| undefined`	`"bottom"`

BubbleTime

The in-bubble timestamp: the last message of a group carries its own time INSIDE the fill, rather than pushing another line under the thread.

No props of its own.

BubbleLink

A link preview: an optional media plate, the raw URL, then the site's own metadata.

Prop	Type	Default
`description`	`ReactNode`	—
`icon` The favicon or platform mark beside the title.	`ReactNode`	—
`media` Full-bleed plate above the URL — a thumbnail, a player, a placeholder.	`ReactNode`	—
`site`	`ReactNode`	—
`title`	`ReactNode`	—

BubbleFile

An attachment row: icon tile, name and size, and whatever the caller wants the trailing control to be.

Prop	Type	Default
`name`required	`ReactNode`	—
`action`	`ReactNode`	—
`icon`	`ReactNode`	—
`meta` Type and size, e.g. `PDF · 1004.3 KB`.	`ReactNode`	—

BubbleSticker

A sticker or an emoji sent on its own.

No props of its own.

Type

registry:ui

npm packages

@base-ui/react class-variance-authority

Files written

components/ui/hiip-ui/bubble.tsx