# Assistant answer with formatted content

> A ghost bubble carrying a heading, a list, emphasis and inline code.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-bubble-7).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-bubble-7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-bubble-7-light-1c27150c5f8133df.png
- Registry item: https://reui.io/r/new-york-v4/c-bubble-7.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-bubble-7.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `bubble`

## Files

### `c-bubble-7.tsx`

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

export function Pattern() {
  return (
    <div className="mx-auto flex w-full max-w-2xl flex-col gap-4">
      <Bubble variant="muted" align="end">
        <BubbleContent>
          Summarise what changed in 3.4 for the release note.
        </BubbleContent>
      </Bubble>
      {/* ghost is the only variant with no frame and no 80% cap, which is what
          lets a structured assistant answer use the whole width of the row. */}
      <Bubble variant="ghost">
        <BubbleContent>
          {/* Real elements, not a markdown renderer, so the example installs
              with no parser dependency and never sets raw HTML from a string.
              The block layout sits on this wrapper rather than on BubbleContent,
              which owns its padding, radius and font size in all eight styles. */}
          <div className="flex flex-col gap-3">
            <p>
              3.4 is a reliability release. Nothing in it changes an API, and
              three fixes are worth naming in the note.
            </p>
            <h4 className="font-semibold">What changed</h4>
            {/* No font size on any block child, so lyra still resolves its own
                smaller rung. The one relative size is the em on the code chip. */}
            <ul className="marker:text-muted-foreground ms-4 list-disc space-y-1">
              <li>
                <strong className="font-medium">Refund webhooks</strong> retry
                for up to a minute, so a{" "}
                <code className="bg-muted rounded-sm px-1 py-0.5 font-mono text-[0.85em]">
                  charge.refunded
                </code>{" "}
                event no longer drops when the processor is slow to answer.
              </li>
              <li>
                <strong className="font-medium">Group membership</strong> stays
                in step with the identity provider, including the removals that
                used to need a manual resync.
              </li>
              <li>
                <strong className="font-medium">CSV exports</strong> finish at
                every accepted size. The 250MB ceiling that failed silently is
                gone.
              </li>
            </ul>
            <p className="text-muted-foreground">
              Everything else is unchanged.{" "}
              <a href="#" className="underline underline-offset-4">
                Open the full diff
              </a>
            </p>
          </div>
        </BubbleContent>
      </Bubble>
    </div>
  )
}
```