Bubble

Does the theme support Markdoc?

Yes. Register a tag with an Astro wrapper.

Great, thanks.

Import

import { Bubble, BubbleContent, BubbleGroup } from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/BubbleExample.tsx

import { Bubble, BubbleContent, BubbleGroup } from "@pelagornis/page/components";

export default function BubbleDemo() {
  return (
    <BubbleGroup className="w-full max-w-md">
      <Bubble variant="muted" align="start">
        <BubbleContent>Does the theme support Markdoc?</BubbleContent>
      </Bubble>
      <Bubble variant="default" align="end">
        <BubbleContent>Yes. Register a tag with an Astro wrapper.</BubbleContent>
      </Bubble>
      <Bubble variant="muted" align="start">
        <BubbleContent>Great, thanks.</BubbleContent>
      </Bubble>
    </BubbleGroup>
  );
}

Use in MDX

Bubble is composed from parts that share React state. Children written in MDX are rendered as separate islands, so the parts can’t reach each other. Put the composition in a .tsx file, like the example above, and import that file instead.

src/content/docs/example.mdx

---
title: Example
---

import BubbleExample from "../../components/BubbleExample";

<BubbleExample client:load />

client:load hydrates the island on page load. Use client:visible for content far down the page.

Use in Markdoc

Markdoc tags render Astro components, and this one needs client state. Wrap the example in an .astro file that hydrates it, then register that file as a tag.

src/components/markdoc/BubbleExample.astro

---
import BubbleExample from "../BubbleExample";
---

<BubbleExample client:load />

markdoc.config.mjs

import { component, defineMarkdocConfig } from "@astrojs/markdoc/config";
import starlightMarkdoc from "@astrojs/starlight-markdoc";
import pageMarkdoc from "@pelagornis/page/markdoc";

export default defineMarkdocConfig({
  extends: [starlightMarkdoc(), pageMarkdoc()],
  tags: {
    "bubble-example": {
      render: component("./src/components/markdoc/BubbleExample.astro"),
      selfClosing: true,
    },
  },
});

src/content/docs/example.mdoc

{% bubble-example /%}

Variants

Values the component accepts for each variant prop.

Prop	Values
variant	default secondary muted tinted outline ghost destructive

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
root	bubble
content	bubble-content
group	bubble-group
reactions	bubble-reactions
surface	bubble-surface

Reference

• RefineUI · Bubble for design guidance and token detail.
• Use in MDX and Use in Markdoc for the general rules.