A Chat bubble component
qui-bubble is a lightweight, customizable Web Component for rendering chat bubbles in a conversation-style UI. It supports text messages, rich content, avatars, typing indicators, and CSS customizations.
---
ā
Web Component ā Works in any frontend framework or vanilla HTML
ā
Customizable with CSS Variables ā Easily style bubbles, colors, and spacing
ā
Supports Named Messages ā Display sender names with icons
ā
Slot Support ā Embed rich content like images or formatted text
ā
Typing Indicator ā Animated dots for real-time conversations
---
Install via npm:
``bash`
npm i @qomponent/qui-bubble
---
javascript
import '@qomponent/qui-bubble';
`#### HTML (No Build Setup Required)
`html
`$3
`html
icon="https://randomuser.me/api/portraits/women/1.jpg">
Custom styled message!
My new profile pic
`---
šØ Customization
You can customize the chat bubbles using CSS variables:
`css
chat-bubble {
--chat-bubble-bg: #007aff;
--chat-bubble-color: white;
--chat-bubble-border-radius: 20px;
--chat-bubble-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
--chat-bubble-typing-dot: #ff5722;
}
`#### Available CSS Variables
| Variable | Default Value | Description |
|------------------------------|--------------|-------------|
|
--chat-bubble-bg | lightgray | Background color of the bubble |
| --chat-bubble-color | black | Text color inside the bubble |
| --chat-bubble-border-radius | 12px | Corner radius of the bubble |
| --chat-bubble-padding | 8px 12px | Inner padding of the bubble |
| --chat-bubble-shadow | 0px 4px 8px rgba(0, 0, 0, 0.1) | Shadow effect |
| --chat-bubble-typing-dot | #666 | Color of typing indicator dots |---
š„ Example (Run Locally)
To run the example locally:
`bash
npm install
npm start
``This will start a local development server with a demo page.
---
Pull requests are welcome! š
For major changes, please open an issue first to discuss your ideas.
---
This project is licensed under the Apache 2.0 License.
Read the full license.