104Get started
HextaUI

Bubble: Nested reply

A quoted bubble inside another keeps radii concentric with its parent.

Original: can we ship Friday?

Yes, Friday works.

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

export function BubbleNested() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Bubble align="end">
        <BubbleContent>
          <Bubble variant="tinted">
            <BubbleContent>Original: can we ship Friday?</BubbleContent>
          </Bubble>
          <p className="pt-2">Yes, Friday works.</p>
        </BubbleContent>
      </Bubble>
    </div>
  )
}

Add this example

This adds the example as components/examples/bubble/nested.tsx, together with the Bubble component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/bubble-nested.json

To add only the component, follow the Bubble installation.

Props in this example

The Bubble props this example sets, from the API reference.

Bubble

PropTypeDefault
variant
"default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive""default"
align
"start" | "end""start"

Every prop is in the Bubble API reference.

More Bubble examples

See them all, with keyboard support and accessibility notes, on the Bubble page.

Related components