diff --git a/docs/app/components/shared/components_list.rb b/docs/app/components/shared/components_list.rb
index 60be2224..db939014 100644
--- a/docs/app/components/shared/components_list.rb
+++ b/docs/app/components/shared/components_list.rb
@@ -12,6 +12,7 @@ def components
{name: "Avatar", path: docs_avatar_path},
{name: "Badge", path: docs_badge_path},
{name: "Breadcrumb", path: docs_breadcrumb_path},
+ {name: "Bubble", path: docs_bubble_path},
{name: "Button", path: docs_button_path},
{name: "Calendar", path: docs_calendar_path},
{name: "Card", path: docs_card_path},
diff --git a/docs/app/controllers/docs_controller.rb b/docs/app/controllers/docs_controller.rb
index ce1dc881..674237aa 100644
--- a/docs/app/controllers/docs_controller.rb
+++ b/docs/app/controllers/docs_controller.rb
@@ -74,6 +74,10 @@ def breadcrumb
render Views::Docs::Breadcrumb.new
end
+ def bubble
+ render Views::Docs::Bubble.new
+ end
+
def button
render Views::Docs::Button.new
end
diff --git a/docs/app/lib/site_files.rb b/docs/app/lib/site_files.rb
index f9c6d3f8..12c085a9 100644
--- a/docs/app/lib/site_files.rb
+++ b/docs/app/lib/site_files.rb
@@ -86,6 +86,7 @@ class SiteFiles
{title: "Avatar", path: "/docs/avatar", description: "Image and fallback primitives for representing a user."},
{title: "Badge", path: "/docs/badge", description: "Small status or label element."},
{title: "Breadcrumb", path: "/docs/breadcrumb", description: "Navigation trail showing the current location in a hierarchy."},
+ {title: "Bubble", path: "/docs/bubble", description: "Chat bubble surface with variants, alignment, grouping, and reactions."},
{title: "Button", path: "/docs/button", description: "Button component and button-like variants."},
{title: "Calendar", path: "/docs/calendar", description: "Date field component for entering and editing dates."},
{title: "Card", path: "/docs/card", description: "Content container with header, content, and footer primitives."},
diff --git a/docs/app/views/docs/bubble.rb b/docs/app/views/docs/bubble.rb
new file mode 100644
index 00000000..d447ebc7
--- /dev/null
+++ b/docs/app/views/docs/bubble.rb
@@ -0,0 +1,167 @@
+# frozen_string_literal: true
+
+class Views::Docs::Bubble < Views::Base
+ def view_template
+ component = "Bubble"
+
+ div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+ render Docs::Header.new(title: "Bubble", description: "A chat bubble surface for displaying conversational content, with variants, alignment, grouping, and reactions.")
+
+ Heading(level: 2) { "Usage" }
+
+ render Docs::VisualCodeExample.new(title: "Default", context: self) do
+ <<~RUBY
+ Bubble(align: :end) do
+ BubbleContent { "Hey there! what's up?" }
+ end
+ RUBY
+ end
+
+ render Docs::VisualCodeExample.new(title: "Conversation", context: self) do
+ <<~RUBY
+ div(class: "flex flex-col gap-8") do
+ Bubble(align: :end) do
+ BubbleContent { "Hey there! what's up?" }
+ end
+ BubbleGroup do
+ Bubble(variant: :muted) do
+ BubbleContent { "Hey! Want to see chat bubbles?" }
+ end
+ Bubble(variant: :muted) do
+ BubbleContent { "I can group messages, switch sides, and keep the whole thread easy to scan." }
+ BubbleReactions(role: "img", aria_label: "Reaction: thumbs up") do
+ span { "👍" }
+ end
+ end
+ end
+ Bubble(align: :end) do
+ BubbleContent { "Sure. Hit me with your best demo." }
+ end
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "Variants" }
+
+ render Docs::VisualCodeExample.new(title: "Variants", context: self) do
+ <<~RUBY
+ div(class: "flex flex-col gap-4 w-full") do
+ Bubble(variant: :default) { BubbleContent { "Default" } }
+ Bubble(variant: :secondary) { BubbleContent { "Secondary" } }
+ Bubble(variant: :muted) { BubbleContent { "Muted" } }
+ Bubble(variant: :tinted) { BubbleContent { "Tinted" } }
+ Bubble(variant: :outline) { BubbleContent { "Outline" } }
+ Bubble(variant: :ghost) { BubbleContent { "Ghost — unframed, full width for assistant text or markdown." } }
+ Bubble(variant: :destructive) { BubbleContent { "Destructive — something went wrong." } }
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "Alignment" }
+
+ render Docs::VisualCodeExample.new(title: "Start and end", context: self) do
+ <<~RUBY
+ div(class: "flex flex-col gap-4 w-full") do
+ Bubble(align: :start, variant: :muted) do
+ BubbleContent { "Aligned to the start (receiver)." }
+ end
+ Bubble(align: :end) do
+ BubbleContent { "Aligned to the end (sender)." }
+ end
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "Reactions" }
+
+ render Docs::VisualCodeExample.new(title: "Reactions", context: self) do
+ <<~RUBY
+ div(class: "flex flex-col gap-10 w-full py-6") do
+ Bubble(variant: :muted) do
+ BubbleContent { "Reactions anchor to the bubble edge." }
+ BubbleReactions(role: "img", aria_label: "Reactions: thumbs up, fire, eyes, and 2 more") do
+ span { "👍" }
+ span { "🔥" }
+ span { "👀" }
+ span { "+2" }
+ end
+ end
+ Bubble(align: :end) do
+ BubbleContent { "Place them on top and to the start too." }
+ BubbleReactions(side: :top, align: :start, role: "img", aria_label: "Reaction: heart") do
+ span { "❤️" }
+ end
+ end
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "Group" }
+
+ render Docs::VisualCodeExample.new(title: "Bubble group", context: self) do
+ <<~RUBY
+ BubbleGroup do
+ Bubble(variant: :muted) { BubbleContent { "First message in the group." } }
+ Bubble(variant: :muted) { BubbleContent { "Second one, tighter spacing." } }
+ Bubble(variant: :muted) { BubbleContent { "Third, all stacked together." } }
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "Link or button bubble" }
+
+ render Docs::VisualCodeExample.new(title: "Interactive content", context: self) do
+ <<~RUBY
+ div(class: "flex flex-col gap-4 w-full") do
+ Bubble(align: :end) do
+ BubbleContent(as: :a, href: "#") { "Tap to open the link →" }
+ end
+ Bubble(variant: :outline) do
+ BubbleContent(as: :button, type: "button") { "Retry sending" }
+ end
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "With Tooltip" }
+
+ render Docs::VisualCodeExample.new(title: "Reveal metadata on hover", context: self) do
+ <<~RUBY
+ Tooltip do
+ TooltipTrigger(class: "w-fit") do
+ Bubble(variant: :muted, class: "max-w-none") do
+ BubbleContent { "Read 9:41 AM" }
+ end
+ end
+ TooltipContent do
+ Text { "Delivered and read" }
+ end
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "With Popover" }
+
+ render Docs::VisualCodeExample.new(title: "Surface details on demand", context: self) do
+ <<~RUBY
+ Popover do
+ PopoverTrigger do
+ Bubble(variant: :destructive, class: "max-w-none") do
+ BubbleContent { "Message failed to send" }
+ end
+ end
+ PopoverContent(class: "w-64") do
+ Text(weight: :semibold) { "Delivery error" }
+ Text(size: :sm, class: "text-muted-foreground") { "The recipient's inbox is full. Try again later." }
+ end
+ end
+ RUBY
+ end
+
+ render Components::ComponentSetup::Tabs.new(component_name: component)
+
+ # components
+ render Docs::ComponentsTable.new(component_files(component))
+ end
+ end
+end
diff --git a/docs/config/routes.rb b/docs/config/routes.rb
index 59107400..ec38b95c 100644
--- a/docs/config/routes.rb
+++ b/docs/config/routes.rb
@@ -30,6 +30,7 @@
get "avatar", to: "docs#avatar", as: :docs_avatar
get "badge", to: "docs#badge", as: :docs_badge
get "breadcrumb", to: "docs#breadcrumb", as: :docs_breadcrumb
+ get "bubble", to: "docs#bubble", as: :docs_bubble
get "button", to: "docs#button", as: :docs_button
get "card", to: "docs#card", as: :docs_card
get "carousel", to: "docs#carousel", as: :docs_carousel
diff --git a/docs/public/llms-full.txt b/docs/public/llms-full.txt
index 8e0feff8..6ca36ad5 100644
--- a/docs/public/llms-full.txt
+++ b/docs/public/llms-full.txt
@@ -118,6 +118,11 @@ This file expands the curated /llms.txt map into a compact reference that can be
- URL: https://rubyui.com/docs/breadcrumb
- Summary: Navigation trail showing the current location in a hierarchy.
+### Bubble
+
+- URL: https://rubyui.com/docs/bubble
+- Summary: Chat bubble surface with variants, alignment, grouping, and reactions.
+
### Button
- URL: https://rubyui.com/docs/button
diff --git a/docs/public/llms.txt b/docs/public/llms.txt
index a02be577..1511c854 100644
--- a/docs/public/llms.txt
+++ b/docs/public/llms.txt
@@ -28,6 +28,7 @@ Use the core docs first for installation, theming, dark mode, and customization
- [Avatar](https://rubyui.com/docs/avatar): Image and fallback primitives for representing a user.
- [Badge](https://rubyui.com/docs/badge): Small status or label element.
- [Breadcrumb](https://rubyui.com/docs/breadcrumb): Navigation trail showing the current location in a hierarchy.
+- [Bubble](https://rubyui.com/docs/bubble): Chat bubble surface with variants, alignment, grouping, and reactions.
- [Button](https://rubyui.com/docs/button): Button component and button-like variants.
- [Calendar](https://rubyui.com/docs/calendar): Date field component for entering and editing dates.
- [Card](https://rubyui.com/docs/card): Content container with header, content, and footer primitives.
diff --git a/docs/public/sitemap.xml b/docs/public/sitemap.xml
index 2cd1f293..0deb3a5b 100644
--- a/docs/public/sitemap.xml
+++ b/docs/public/sitemap.xml
@@ -95,6 +95,11 @@
monthly
0.7
+
+ https://rubyui.com/docs/bubble
+ monthly
+ 0.7
+
https://rubyui.com/docs/button
monthly
diff --git a/gem/lib/ruby_ui/bubble/bubble.rb b/gem/lib/ruby_ui/bubble/bubble.rb
new file mode 100644
index 00000000..85ce6c20
--- /dev/null
+++ b/gem/lib/ruby_ui/bubble/bubble.rb
@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module RubyUI
+ class Bubble < Base
+ VARIANTS = {
+ default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+ secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+ muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+ tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+ outline: "*:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+ ghost: "*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none",
+ destructive: "*:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+ }
+
+ def initialize(variant: :default, align: :start, **attrs)
+ @variant = variant
+ @align = align
+ super(**attrs)
+ end
+
+ def view_template(&)
+ div(**attrs, &)
+ end
+
+ private
+
+ def default_attrs
+ {
+ data: {slot: "bubble", variant: @variant, align: @align},
+ class: [
+ "group/bubble relative flex w-fit min-w-0 flex-col gap-1 max-w-[80%] data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+ VARIANTS[@variant]
+ ]
+ }
+ end
+ end
+end
diff --git a/gem/lib/ruby_ui/bubble/bubble_content.rb b/gem/lib/ruby_ui/bubble/bubble_content.rb
new file mode 100644
index 00000000..b8f0bcd1
--- /dev/null
+++ b/gem/lib/ruby_ui/bubble/bubble_content.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+ class BubbleContent < Base
+ def initialize(as: :div, **attrs)
+ @as = as
+ super(**attrs)
+ end
+
+ def view_template(&)
+ send(@as, **attrs, &)
+ end
+
+ private
+
+ def default_attrs
+ {
+ data: {slot: "bubble-content"},
+ class: "w-fit max-w-full min-w-0 overflow-hidden wrap-break-word rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed group-data-[align=end]/bubble:self-end [&:is(button,a)]:text-left [&:is(button,a)]:outline-none [&:is(button,a)]:transition-colors [&:is(button,a):focus-visible]:border-ring [&:is(button,a):focus-visible]:ring-3 [&:is(button,a):focus-visible]:ring-ring/30"
+ }
+ end
+ end
+end
diff --git a/gem/lib/ruby_ui/bubble/bubble_docs.rb b/gem/lib/ruby_ui/bubble/bubble_docs.rb
new file mode 100644
index 00000000..d447ebc7
--- /dev/null
+++ b/gem/lib/ruby_ui/bubble/bubble_docs.rb
@@ -0,0 +1,167 @@
+# frozen_string_literal: true
+
+class Views::Docs::Bubble < Views::Base
+ def view_template
+ component = "Bubble"
+
+ div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+ render Docs::Header.new(title: "Bubble", description: "A chat bubble surface for displaying conversational content, with variants, alignment, grouping, and reactions.")
+
+ Heading(level: 2) { "Usage" }
+
+ render Docs::VisualCodeExample.new(title: "Default", context: self) do
+ <<~RUBY
+ Bubble(align: :end) do
+ BubbleContent { "Hey there! what's up?" }
+ end
+ RUBY
+ end
+
+ render Docs::VisualCodeExample.new(title: "Conversation", context: self) do
+ <<~RUBY
+ div(class: "flex flex-col gap-8") do
+ Bubble(align: :end) do
+ BubbleContent { "Hey there! what's up?" }
+ end
+ BubbleGroup do
+ Bubble(variant: :muted) do
+ BubbleContent { "Hey! Want to see chat bubbles?" }
+ end
+ Bubble(variant: :muted) do
+ BubbleContent { "I can group messages, switch sides, and keep the whole thread easy to scan." }
+ BubbleReactions(role: "img", aria_label: "Reaction: thumbs up") do
+ span { "👍" }
+ end
+ end
+ end
+ Bubble(align: :end) do
+ BubbleContent { "Sure. Hit me with your best demo." }
+ end
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "Variants" }
+
+ render Docs::VisualCodeExample.new(title: "Variants", context: self) do
+ <<~RUBY
+ div(class: "flex flex-col gap-4 w-full") do
+ Bubble(variant: :default) { BubbleContent { "Default" } }
+ Bubble(variant: :secondary) { BubbleContent { "Secondary" } }
+ Bubble(variant: :muted) { BubbleContent { "Muted" } }
+ Bubble(variant: :tinted) { BubbleContent { "Tinted" } }
+ Bubble(variant: :outline) { BubbleContent { "Outline" } }
+ Bubble(variant: :ghost) { BubbleContent { "Ghost — unframed, full width for assistant text or markdown." } }
+ Bubble(variant: :destructive) { BubbleContent { "Destructive — something went wrong." } }
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "Alignment" }
+
+ render Docs::VisualCodeExample.new(title: "Start and end", context: self) do
+ <<~RUBY
+ div(class: "flex flex-col gap-4 w-full") do
+ Bubble(align: :start, variant: :muted) do
+ BubbleContent { "Aligned to the start (receiver)." }
+ end
+ Bubble(align: :end) do
+ BubbleContent { "Aligned to the end (sender)." }
+ end
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "Reactions" }
+
+ render Docs::VisualCodeExample.new(title: "Reactions", context: self) do
+ <<~RUBY
+ div(class: "flex flex-col gap-10 w-full py-6") do
+ Bubble(variant: :muted) do
+ BubbleContent { "Reactions anchor to the bubble edge." }
+ BubbleReactions(role: "img", aria_label: "Reactions: thumbs up, fire, eyes, and 2 more") do
+ span { "👍" }
+ span { "🔥" }
+ span { "👀" }
+ span { "+2" }
+ end
+ end
+ Bubble(align: :end) do
+ BubbleContent { "Place them on top and to the start too." }
+ BubbleReactions(side: :top, align: :start, role: "img", aria_label: "Reaction: heart") do
+ span { "❤️" }
+ end
+ end
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "Group" }
+
+ render Docs::VisualCodeExample.new(title: "Bubble group", context: self) do
+ <<~RUBY
+ BubbleGroup do
+ Bubble(variant: :muted) { BubbleContent { "First message in the group." } }
+ Bubble(variant: :muted) { BubbleContent { "Second one, tighter spacing." } }
+ Bubble(variant: :muted) { BubbleContent { "Third, all stacked together." } }
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "Link or button bubble" }
+
+ render Docs::VisualCodeExample.new(title: "Interactive content", context: self) do
+ <<~RUBY
+ div(class: "flex flex-col gap-4 w-full") do
+ Bubble(align: :end) do
+ BubbleContent(as: :a, href: "#") { "Tap to open the link →" }
+ end
+ Bubble(variant: :outline) do
+ BubbleContent(as: :button, type: "button") { "Retry sending" }
+ end
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "With Tooltip" }
+
+ render Docs::VisualCodeExample.new(title: "Reveal metadata on hover", context: self) do
+ <<~RUBY
+ Tooltip do
+ TooltipTrigger(class: "w-fit") do
+ Bubble(variant: :muted, class: "max-w-none") do
+ BubbleContent { "Read 9:41 AM" }
+ end
+ end
+ TooltipContent do
+ Text { "Delivered and read" }
+ end
+ end
+ RUBY
+ end
+
+ Heading(level: 2) { "With Popover" }
+
+ render Docs::VisualCodeExample.new(title: "Surface details on demand", context: self) do
+ <<~RUBY
+ Popover do
+ PopoverTrigger do
+ Bubble(variant: :destructive, class: "max-w-none") do
+ BubbleContent { "Message failed to send" }
+ end
+ end
+ PopoverContent(class: "w-64") do
+ Text(weight: :semibold) { "Delivery error" }
+ Text(size: :sm, class: "text-muted-foreground") { "The recipient's inbox is full. Try again later." }
+ end
+ end
+ RUBY
+ end
+
+ render Components::ComponentSetup::Tabs.new(component_name: component)
+
+ # components
+ render Docs::ComponentsTable.new(component_files(component))
+ end
+ end
+end
diff --git a/gem/lib/ruby_ui/bubble/bubble_group.rb b/gem/lib/ruby_ui/bubble/bubble_group.rb
new file mode 100644
index 00000000..0324751b
--- /dev/null
+++ b/gem/lib/ruby_ui/bubble/bubble_group.rb
@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+ class BubbleGroup < Base
+ def view_template(&)
+ div(**attrs, &)
+ end
+
+ private
+
+ def default_attrs
+ {
+ data: {slot: "bubble-group"},
+ class: "flex min-w-0 flex-col gap-2"
+ }
+ end
+ end
+end
diff --git a/gem/lib/ruby_ui/bubble/bubble_reactions.rb b/gem/lib/ruby_ui/bubble/bubble_reactions.rb
new file mode 100644
index 00000000..4e652aed
--- /dev/null
+++ b/gem/lib/ruby_ui/bubble/bubble_reactions.rb
@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+ class BubbleReactions < Base
+ SIDES = {
+ top: "top-0 -translate-y-3/4",
+ bottom: "bottom-0 translate-y-3/4"
+ }
+
+ ALIGNS = {
+ start: "left-3",
+ end: "right-3"
+ }
+
+ def initialize(side: :bottom, align: :end, **attrs)
+ @side = side
+ @align = align
+ super(**attrs)
+ end
+
+ def view_template(&)
+ div(**attrs, &)
+ end
+
+ private
+
+ def default_attrs
+ {
+ data: {slot: "bubble-reactions", side: @side, align: @align},
+ class: [
+ "absolute z-10 flex w-fit items-center justify-center rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm",
+ SIDES[@side],
+ ALIGNS[@align]
+ ]
+ }
+ end
+ end
+end
diff --git a/gem/test/ruby_ui/bubble_test.rb b/gem/test/ruby_ui/bubble_test.rb
new file mode 100644
index 00000000..105a04c2
--- /dev/null
+++ b/gem/test/ruby_ui/bubble_test.rb
@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::BubbleTest < ComponentTest
+ def test_renders_content
+ output = phlex do
+ RubyUI.Bubble do
+ RubyUI.BubbleContent { "Hello" }
+ end
+ end
+
+ assert_match(/Hello/, output)
+ assert_match(/data-slot="bubble"/, output)
+ assert_match(/data-slot="bubble-content"/, output)
+ end
+
+ def test_default_variant_and_align
+ output = phlex { RubyUI.Bubble { RubyUI.BubbleContent { "Hi" } } }
+
+ assert_match(/data-variant="default"/, output)
+ assert_match(/data-align="start"/, output)
+ end
+
+ def test_variant_and_align_attributes
+ output = phlex do
+ RubyUI.Bubble(variant: :muted, align: :end) { RubyUI.BubbleContent { "Hi" } }
+ end
+
+ assert_match(/data-variant="muted"/, output)
+ assert_match(/data-align="end"/, output)
+ end
+
+ def test_reactions_defaults_to_bottom_end
+ output = phlex do
+ RubyUI.Bubble do
+ RubyUI.BubbleContent { "Hi" }
+ RubyUI.BubbleReactions { "👍" }
+ end
+ end
+
+ assert_match(/data-slot="bubble-reactions"/, output)
+ assert_match(/data-side="bottom"/, output)
+ assert_match(/data-align="end"/, output)
+ end
+
+ def test_reactions_side_and_align
+ output = phlex do
+ RubyUI.BubbleReactions(side: :top, align: :start) { "🔥" }
+ end
+
+ assert_match(/data-side="top"/, output)
+ assert_match(/data-align="start"/, output)
+ end
+
+ def test_content_renders_as_anchor
+ output = phlex do
+ RubyUI.Bubble { RubyUI.BubbleContent(as: :a, href: "#") { "Open" } }
+ end
+
+ assert_match(/]*data-slot="bubble-content"[^>]*href="#"/, output)
+ assert_match(/Open/, output)
+ end
+
+ def test_content_renders_as_button
+ output = phlex do
+ RubyUI.Bubble { RubyUI.BubbleContent(as: :button, type: "button") { "Retry" } }
+ end
+
+ assert_match(/]*data-slot="bubble-content"/, output)
+ end
+
+ def test_group_wraps_bubbles
+ output = phlex do
+ RubyUI.BubbleGroup do
+ RubyUI.Bubble { RubyUI.BubbleContent { "a" } }
+ RubyUI.Bubble { RubyUI.BubbleContent { "b" } }
+ end
+ end
+
+ assert_match(/data-slot="bubble-group"/, output)
+ end
+end
diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index cd400482..8109f5bf 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -371,6 +371,82 @@
}
]
},
+ "bubble": {
+ "name": "Bubble",
+ "description": "A chat bubble surface for displaying conversational content, with variants, alignment, grouping, and reactions.",
+ "files": [
+ {
+ "path": "bubble.rb",
+ "content": "# frozen_string_literal: true\n\nmodule RubyUI\n class Bubble < Base\n VARIANTS = {\n default: \"*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80\",\n secondary: \"*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]\",\n muted: \"*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]\",\n tinted: \"*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]\",\n outline: \"*:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30\",\n ghost: \"*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none\",\n destructive: \"*:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30\"\n }\n\n def initialize(variant: :default, align: :start, **attrs)\n @variant = variant\n @align = align\n super(**attrs)\n end\n\n def view_template(&)\n div(**attrs, &)\n end\n\n private\n\n def default_attrs\n {\n data: {slot: \"bubble\", variant: @variant, align: @align},\n class: [\n \"group/bubble relative flex w-fit min-w-0 flex-col gap-1 max-w-[80%] data-[align=end]:self-end data-[variant=ghost]:max-w-full\",\n VARIANTS[@variant]\n ]\n }\n end\n end\nend\n"
+ },
+ {
+ "path": "bubble_content.rb",
+ "content": "# frozen_string_literal: true\n\nmodule RubyUI\n class BubbleContent < Base\n def initialize(as: :div, **attrs)\n @as = as\n super(**attrs)\n end\n\n def view_template(&)\n send(@as, **attrs, &)\n end\n\n private\n\n def default_attrs\n {\n data: {slot: \"bubble-content\"},\n class: \"w-fit max-w-full min-w-0 overflow-hidden wrap-break-word rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed group-data-[align=end]/bubble:self-end [&:is(button,a)]:text-left [&:is(button,a)]:outline-none [&:is(button,a)]:transition-colors [&:is(button,a):focus-visible]:border-ring [&:is(button,a):focus-visible]:ring-3 [&:is(button,a):focus-visible]:ring-ring/30\"\n }\n end\n end\nend\n"
+ },
+ {
+ "path": "bubble_group.rb",
+ "content": "# frozen_string_literal: true\n\nmodule RubyUI\n class BubbleGroup < Base\n def view_template(&)\n div(**attrs, &)\n end\n\n private\n\n def default_attrs\n {\n data: {slot: \"bubble-group\"},\n class: \"flex min-w-0 flex-col gap-2\"\n }\n end\n end\nend\n"
+ },
+ {
+ "path": "bubble_reactions.rb",
+ "content": "# frozen_string_literal: true\n\nmodule RubyUI\n class BubbleReactions < Base\n SIDES = {\n top: \"top-0 -translate-y-3/4\",\n bottom: \"bottom-0 translate-y-3/4\"\n }\n\n ALIGNS = {\n start: \"left-3\",\n end: \"right-3\"\n }\n\n def initialize(side: :bottom, align: :end, **attrs)\n @side = side\n @align = align\n super(**attrs)\n end\n\n def view_template(&)\n div(**attrs, &)\n end\n\n private\n\n def default_attrs\n {\n data: {slot: \"bubble-reactions\", side: @side, align: @align},\n class: [\n \"absolute z-10 flex w-fit items-center justify-center rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm\",\n SIDES[@side],\n ALIGNS[@align]\n ]\n }\n end\n end\nend\n"
+ }
+ ],
+ "dependencies": {
+ "components": [],
+ "js_packages": [],
+ "gems": []
+ },
+ "install_command": "rails g ruby_ui:component Bubble",
+ "docs_markdown": "# Bubble\n\nA chat bubble surface for displaying conversational content, with variants, alignment, grouping, and reactions.\n\n## Usage\n\n### Default\n\n```ruby\nBubble(align: :end) do\n BubbleContent { \"Hey there! what's up?\" }\nend\n```\n\n### Conversation\n\n```ruby\ndiv(class: \"flex flex-col gap-8\") do\n Bubble(align: :end) do\n BubbleContent { \"Hey there! what's up?\" }\n end\n BubbleGroup do\n Bubble(variant: :muted) do\n BubbleContent { \"Hey! Want to see chat bubbles?\" }\n end\n Bubble(variant: :muted) do\n BubbleContent { \"I can group messages, switch sides, and keep the whole thread easy to scan.\" }\n BubbleReactions(role: \"img\", aria_label: \"Reaction: thumbs up\") do\n span { \"👍\" }\n end\n end\n end\n Bubble(align: :end) do\n BubbleContent { \"Sure. Hit me with your best demo.\" }\n end\nend\n```\n\n## Variants\n\n### Variants\n\n```ruby\ndiv(class: \"flex flex-col gap-4 w-full\") do\n Bubble(variant: :default) { BubbleContent { \"Default\" } }\n Bubble(variant: :secondary) { BubbleContent { \"Secondary\" } }\n Bubble(variant: :muted) { BubbleContent { \"Muted\" } }\n Bubble(variant: :tinted) { BubbleContent { \"Tinted\" } }\n Bubble(variant: :outline) { BubbleContent { \"Outline\" } }\n Bubble(variant: :ghost) { BubbleContent { \"Ghost — unframed, full width for assistant text or markdown.\" } }\n Bubble(variant: :destructive) { BubbleContent { \"Destructive — something went wrong.\" } }\nend\n```\n\n## Alignment\n\n### Start and end\n\n```ruby\ndiv(class: \"flex flex-col gap-4 w-full\") do\n Bubble(align: :start, variant: :muted) do\n BubbleContent { \"Aligned to the start (receiver).\" }\n end\n Bubble(align: :end) do\n BubbleContent { \"Aligned to the end (sender).\" }\n end\nend\n```\n\n## Reactions\n\n### Reactions\n\n```ruby\ndiv(class: \"flex flex-col gap-10 w-full py-6\") do\n Bubble(variant: :muted) do\n BubbleContent { \"Reactions anchor to the bubble edge.\" }\n BubbleReactions(role: \"img\", aria_label: \"Reactions: thumbs up, fire, eyes, and 2 more\") do\n span { \"👍\" }\n span { \"🔥\" }\n span { \"👀\" }\n span { \"+2\" }\n end\n end\n Bubble(align: :end) do\n BubbleContent { \"Place them on top and to the start too.\" }\n BubbleReactions(side: :top, align: :start, role: \"img\", aria_label: \"Reaction: heart\") do\n span { \"❤️\" }\n end\n end\nend\n```\n\n## Group\n\n### Bubble group\n\n```ruby\nBubbleGroup do\n Bubble(variant: :muted) { BubbleContent { \"First message in the group.\" } }\n Bubble(variant: :muted) { BubbleContent { \"Second one, tighter spacing.\" } }\n Bubble(variant: :muted) { BubbleContent { \"Third, all stacked together.\" } }\nend\n```\n\n## Link or button bubble\n\n### Interactive content\n\n```ruby\ndiv(class: \"flex flex-col gap-4 w-full\") do\n Bubble(align: :end) do\n BubbleContent(as: :a, href: \"#\") { \"Tap to open the link →\" }\n end\n Bubble(variant: :outline) do\n BubbleContent(as: :button, type: \"button\") { \"Retry sending\" }\n end\nend\n```\n\n## With Tooltip\n\n### Reveal metadata on hover\n\n```ruby\nTooltip do\n TooltipTrigger(class: \"w-fit\") do\n Bubble(variant: :muted, class: \"max-w-none\") do\n BubbleContent { \"Read 9:41 AM\" }\n end\n end\n TooltipContent do\n Text { \"Delivered and read\" }\n end\nend\n```\n\n## With Popover\n\n### Surface details on demand\n\n```ruby\nPopover do\n PopoverTrigger do\n Bubble(variant: :destructive, class: \"max-w-none\") do\n BubbleContent { \"Message failed to send\" }\n end\n end\n PopoverContent(class: \"w-64\") do\n Text(weight: :semibold) { \"Delivery error\" }\n Text(size: :sm, class: \"text-muted-foreground\") { \"The recipient's inbox is full. Try again later.\" }\n end\nend\n```",
+ "examples": [
+ {
+ "title": "Default",
+ "code": "Bubble(align: :end) do\n BubbleContent { \"Hey there! what's up?\" }\nend\n",
+ "language": "ruby"
+ },
+ {
+ "title": "Conversation",
+ "code": "div(class: \"flex flex-col gap-8\") do\n Bubble(align: :end) do\n BubbleContent { \"Hey there! what's up?\" }\n end\n BubbleGroup do\n Bubble(variant: :muted) do\n BubbleContent { \"Hey! Want to see chat bubbles?\" }\n end\n Bubble(variant: :muted) do\n BubbleContent { \"I can group messages, switch sides, and keep the whole thread easy to scan.\" }\n BubbleReactions(role: \"img\", aria_label: \"Reaction: thumbs up\") do\n span { \"👍\" }\n end\n end\n end\n Bubble(align: :end) do\n BubbleContent { \"Sure. Hit me with your best demo.\" }\n end\nend\n",
+ "language": "ruby"
+ },
+ {
+ "title": "Variants",
+ "code": "div(class: \"flex flex-col gap-4 w-full\") do\n Bubble(variant: :default) { BubbleContent { \"Default\" } }\n Bubble(variant: :secondary) { BubbleContent { \"Secondary\" } }\n Bubble(variant: :muted) { BubbleContent { \"Muted\" } }\n Bubble(variant: :tinted) { BubbleContent { \"Tinted\" } }\n Bubble(variant: :outline) { BubbleContent { \"Outline\" } }\n Bubble(variant: :ghost) { BubbleContent { \"Ghost — unframed, full width for assistant text or markdown.\" } }\n Bubble(variant: :destructive) { BubbleContent { \"Destructive — something went wrong.\" } }\nend\n",
+ "language": "ruby"
+ },
+ {
+ "title": "Start and end",
+ "code": "div(class: \"flex flex-col gap-4 w-full\") do\n Bubble(align: :start, variant: :muted) do\n BubbleContent { \"Aligned to the start (receiver).\" }\n end\n Bubble(align: :end) do\n BubbleContent { \"Aligned to the end (sender).\" }\n end\nend\n",
+ "language": "ruby"
+ },
+ {
+ "title": "Reactions",
+ "code": "div(class: \"flex flex-col gap-10 w-full py-6\") do\n Bubble(variant: :muted) do\n BubbleContent { \"Reactions anchor to the bubble edge.\" }\n BubbleReactions(role: \"img\", aria_label: \"Reactions: thumbs up, fire, eyes, and 2 more\") do\n span { \"👍\" }\n span { \"🔥\" }\n span { \"👀\" }\n span { \"+2\" }\n end\n end\n Bubble(align: :end) do\n BubbleContent { \"Place them on top and to the start too.\" }\n BubbleReactions(side: :top, align: :start, role: \"img\", aria_label: \"Reaction: heart\") do\n span { \"❤️\" }\n end\n end\nend\n",
+ "language": "ruby"
+ },
+ {
+ "title": "Bubble group",
+ "code": "BubbleGroup do\n Bubble(variant: :muted) { BubbleContent { \"First message in the group.\" } }\n Bubble(variant: :muted) { BubbleContent { \"Second one, tighter spacing.\" } }\n Bubble(variant: :muted) { BubbleContent { \"Third, all stacked together.\" } }\nend\n",
+ "language": "ruby"
+ },
+ {
+ "title": "Interactive content",
+ "code": "div(class: \"flex flex-col gap-4 w-full\") do\n Bubble(align: :end) do\n BubbleContent(as: :a, href: \"#\") { \"Tap to open the link →\" }\n end\n Bubble(variant: :outline) do\n BubbleContent(as: :button, type: \"button\") { \"Retry sending\" }\n end\nend\n",
+ "language": "ruby"
+ },
+ {
+ "title": "Reveal metadata on hover",
+ "code": "Tooltip do\n TooltipTrigger(class: \"w-fit\") do\n Bubble(variant: :muted, class: \"max-w-none\") do\n BubbleContent { \"Read 9:41 AM\" }\n end\n end\n TooltipContent do\n Text { \"Delivered and read\" }\n end\nend\n",
+ "language": "ruby"
+ },
+ {
+ "title": "Surface details on demand",
+ "code": "Popover do\n PopoverTrigger do\n Bubble(variant: :destructive, class: \"max-w-none\") do\n BubbleContent { \"Message failed to send\" }\n end\n end\n PopoverContent(class: \"w-64\") do\n Text(weight: :semibold) { \"Delivery error\" }\n Text(size: :sm, class: \"text-muted-foreground\") { \"The recipient's inbox is full. Try again later.\" }\n end\nend\n",
+ "language": "ruby"
+ }
+ ]
+ },
"button": {
"name": "Button",
"description": "Displays a button or a component that looks like a button.",