Documentation
Data displayGlass surface
Bubble
Frames chat messages and short comments.
01
See it in context
Preview
02
Copy a working example
Usage
---
import { Bubble } from '@santi020k/lumen-astro'
---
<Bubble from="user">Can you summarize the release?</Bubble>
<Bubble>Lumen 0.1 ships primitives for Astro, React, and Web Components.</Bubble>---
import { Bubble } from '@santi020k/lumen-astro'
---
<Bubble from="user">Can you summarize the release?</Bubble>
<Bubble>Lumen 0.1 ships primitives for Astro, React, and Web Components.</Bubble>import { Bubble } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Bubble from="user">Can you summarize the release?</Bubble>
<Bubble>Lumen 0.1 ships primitives for Astro, React, and Web Components.</Bubble>
</>
)import { Bubble } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Bubble from="user">Can you summarize the release?</Bubble>
<Bubble>Lumen 0.1 ships primitives for Astro, React, and Web Components.</Bubble>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-bubble from="user">Can you summarize the release?</lumen-bubble>
<lumen-bubble>Lumen 0.1 ships primitives for Astro, React, and Web Components.</lumen-bubble><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-bubble from="user">Can you summarize the release?</lumen-bubble>
<lumen-bubble>Lumen 0.1 ships primitives for Astro, React, and Web Components.</lumen-bubble>03
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add Bubblelumen add Bubblepnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Bubble --target reactlumen add Bubble --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Bubble --target elementslumen add Bubble --target elementsGlass
Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.
---
import { Bubble } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo docs-glass-demo--stack">
<Bubble glass>
Frosted bubbles stay readable over busy artwork: the backdrop is blurred, saturated, and edge-lit.
</Bubble>
<Bubble from="user" glass>
And the user variant keeps its accent tint on the same surface.
</Bubble>
</div>---
import { Bubble } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo docs-glass-demo--stack">
<Bubble glass>
Frosted bubbles stay readable over busy artwork: the backdrop is blurred, saturated, and edge-lit.
</Bubble>
<Bubble from="user" glass>
And the user variant keeps its accent tint on the same surface.
</Bubble>
</div>import { Bubble } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo docs-glass-demo--stack">
<Bubble glass>
Frosted bubbles stay readable over busy artwork: the backdrop is blurred, saturated, and edge-lit.
</Bubble>
<Bubble from="user" glass>
And the user variant keeps its accent tint on the same surface.
</Bubble>
</div>
</>
)import { Bubble } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo docs-glass-demo--stack">
<Bubble glass>
Frosted bubbles stay readable over busy artwork: the backdrop is blurred, saturated, and edge-lit.
</Bubble>
<Bubble from="user" glass>
And the user variant keeps its accent tint on the same surface.
</Bubble>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo docs-glass-demo--stack">
<lumen-bubble glass>
Frosted bubbles stay readable over busy artwork: the backdrop is blurred, saturated, and edge-lit.
</lumen-bubble>
<lumen-bubble from="user" glass>
And the user variant keeps its accent tint on the same surface.
</lumen-bubble>
</div><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo docs-glass-demo--stack">
<lumen-bubble glass>
Frosted bubbles stay readable over busy artwork: the backdrop is blurred, saturated, and edge-lit.
</lumen-bubble>
<lumen-bubble from="user" glass>
And the user variant keeps its accent tint on the same surface.
</lumen-bubble>
</div>API reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| glass | boolean | "subtle" | "strong" | false | Applies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity. |
| from | "assistant" | "user" | "assistant" | Aligns and styles the bubble for the message author. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |