[{"data":1,"prerenderedAt":1485},["ShallowReactive",2],{"navigation":3,"$f1jvagmno7cfld":496,"\u002Fdocs\u002Fcomponents\u002Fbubble":507,"surround-\u002Fdocs\u002Fcomponents\u002Fbubble":1482},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","\u002Fdocs","docs",[9,326,352,370,376,393,419,432],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":325},"Components","\u002Fdocs\u002Fcomponents","docs\u002F02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002Fcomponents\u002Faccordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002Fcomponents\u002Falert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002Fcomponents\u002Falert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","\u002Fdocs\u002Fcomponents\u002Faspect-ratio","docs\u002Fcomponents\u002Faspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Attachment","\u002Fdocs\u002Fcomponents\u002Fattachment","docs\u002Fcomponents\u002Fattachment",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002Fcomponents\u002Favatar",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002Fcomponents\u002Fbadge",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002Fcomponents\u002Fbreadcrumb",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Bubble","\u002Fdocs\u002Fcomponents\u002Fbubble","docs\u002Fcomponents\u002Fbubble",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002Fcomponents\u002Fbutton",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Button Group","\u002Fdocs\u002Fcomponents\u002Fbutton-group","docs\u002Fcomponents\u002Fbutton-group",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002Fcomponents\u002Fcalendar",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002Fcomponents\u002Fcard",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002Fcomponents\u002Fcarousel",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Chart","\u002Fdocs\u002Fcomponents\u002Fchart","docs\u002Fcomponents\u002Fchart",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002Fcomponents\u002Fcheckbox",{"title":81,"path":82,"stem":83,"new":18,"type":19,"children":-1},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002Fcomponents\u002Fcollapsible",{"title":85,"path":86,"stem":87,"new":18,"type":19,"children":-1},"ColorPicker","\u002Fdocs\u002Fcomponents\u002Fcolor-picker","docs\u002Fcomponents\u002Fcolor-picker",{"title":89,"path":90,"stem":91,"new":18,"type":19,"children":-1},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002Fcomponents\u002Fcombobox",{"title":93,"path":94,"stem":95,"new":18,"type":19,"children":-1},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002Fcomponents\u002Fcommand",{"title":97,"path":98,"stem":99,"new":18,"type":19,"children":-1},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002Fcomponents\u002Fcontext-menu",{"title":101,"path":102,"stem":103,"new":18,"type":19,"children":-1},"Curves","\u002Fdocs\u002Fcomponents\u002Fcurves","docs\u002Fcomponents\u002Fcurves",{"title":105,"path":106,"stem":107,"new":18,"type":19,"children":-1},"Data Table","\u002Fdocs\u002Fcomponents\u002Fdata-table","docs\u002Fcomponents\u002Fdata-table",{"title":109,"path":110,"stem":111,"new":18,"type":19,"children":-1},"Date Picker","\u002Fdocs\u002Fcomponents\u002Fdate-picker","docs\u002Fcomponents\u002Fdate-picker",{"title":113,"path":114,"stem":115,"new":18,"type":19,"children":-1},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002Fcomponents\u002Fdialog",{"title":117,"path":118,"stem":119,"new":18,"type":19,"children":-1},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002Fcomponents\u002Fdrawer",{"title":121,"path":122,"stem":123,"new":18,"type":19,"children":-1},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002Fcomponents\u002Fdropdown-menu",{"title":125,"path":126,"stem":127,"new":18,"type":19,"children":-1},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002Fcomponents\u002Fempty",{"title":129,"path":130,"stem":131,"new":18,"type":19,"children":-1},"Field","\u002Fdocs\u002Fcomponents\u002Ffield","docs\u002Fcomponents\u002Ffield",{"title":133,"path":134,"stem":135,"new":18,"type":19,"children":-1},"FontPicker","\u002Fdocs\u002Fcomponents\u002Ffont-picker","docs\u002Fcomponents\u002Ffont-picker",{"title":137,"path":138,"stem":139,"new":18,"type":19,"children":-1},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002Fcomponents\u002Fform",{"title":141,"path":142,"stem":143,"new":18,"type":19,"children":-1},"Gradient Picker","\u002Fdocs\u002Fcomponents\u002Fgradient-picker","docs\u002Fcomponents\u002Fgradient-picker",{"title":145,"path":146,"stem":147,"new":18,"type":19,"children":-1},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002Fcomponents\u002Fhover-card",{"title":149,"path":150,"stem":151,"new":18,"type":19,"children":-1},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002Fcomponents\u002Finput",{"title":153,"path":154,"stem":155,"new":18,"type":19,"children":-1},"Input Group","\u002Fdocs\u002Fcomponents\u002Finput-group","docs\u002Fcomponents\u002Finput-group",{"title":157,"path":158,"stem":159,"new":18,"type":19,"children":-1},"Input OTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002Fcomponents\u002Finput-otp",{"title":161,"path":162,"stem":163,"new":18,"type":19,"children":-1},"Item","\u002Fdocs\u002Fcomponents\u002Fitem","docs\u002Fcomponents\u002Fitem",{"title":165,"path":166,"stem":167,"new":18,"type":19,"children":-1},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002Fcomponents\u002Fkbd",{"title":169,"path":170,"stem":171,"new":18,"type":19,"children":-1},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002Fcomponents\u002Flabel",{"title":173,"path":174,"stem":175,"new":18,"type":19,"children":-1},"Marker","\u002Fdocs\u002Fcomponents\u002Fmarker","docs\u002Fcomponents\u002Fmarker",{"title":177,"path":178,"stem":179,"new":18,"type":19,"children":-1},"Menubar","\u002Fdocs\u002Fcomponents\u002Fmenubar","docs\u002Fcomponents\u002Fmenubar",{"title":181,"path":182,"stem":183,"new":18,"type":19,"children":-1},"Message","\u002Fdocs\u002Fcomponents\u002Fmessage","docs\u002Fcomponents\u002Fmessage",{"title":185,"path":186,"stem":187,"new":18,"type":19,"children":-1},"Message Scroller","\u002Fdocs\u002Fcomponents\u002Fmessage-scroller","docs\u002Fcomponents\u002Fmessage-scroller",{"title":189,"path":190,"stem":191,"new":18,"type":19,"children":-1},"Native Select","\u002Fdocs\u002Fcomponents\u002Fnative-select","docs\u002Fcomponents\u002Fnative-select",{"title":193,"path":194,"stem":195,"new":18,"type":19,"children":-1},"Navigation Menu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002Fcomponents\u002Fnavigation-menu",{"title":197,"path":198,"stem":199,"new":18,"type":19,"children":-1},"Number Field","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002Fcomponents\u002Fnumber-field",{"title":201,"path":202,"stem":203,"new":18,"type":19,"children":-1},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002Fcomponents\u002Fpagination",{"title":205,"path":206,"stem":207,"new":18,"type":19,"children":-1},"Pin Input","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002Fcomponents\u002Fpin-input",{"title":209,"path":210,"stem":211,"new":18,"type":19,"children":-1},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002Fcomponents\u002Fpopover",{"title":213,"path":214,"stem":215,"new":18,"type":19,"children":-1},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002Fcomponents\u002Fprogress",{"title":217,"path":218,"stem":219,"new":220,"type":19,"children":-1},"Questionnaire","\u002Fdocs\u002Fcomponents\u002Fquestionnaire","docs\u002Fcomponents\u002Fquestionnaire",true,{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002Fcomponents\u002Fradio-group",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Range Calendar","\u002Fdocs\u002Fcomponents\u002Frange-calendar","docs\u002Fcomponents\u002Frange-calendar",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Resizable","\u002Fdocs\u002Fcomponents\u002Fresizable","docs\u002Fcomponents\u002Fresizable",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Scroll Area","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002Fcomponents\u002Fscroll-area",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002Fcomponents\u002Fselect",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002Fcomponents\u002Fseparator",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002Fcomponents\u002Fsheet",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002Fcomponents\u002Fsidebar",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002Fcomponents\u002Fskeleton",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002Fcomponents\u002Fslider",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Sonner","\u002Fdocs\u002Fcomponents\u002Fsonner","docs\u002Fcomponents\u002Fsonner",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002Fcomponents\u002Fspinner",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002Fcomponents\u002Fstepper",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002Fcomponents\u002Fswitch",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002Fcomponents\u002Ftable",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002Fcomponents\u002Ftabs",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Tags Input","\u002Fdocs\u002Fcomponents\u002Ftags-input","docs\u002Fcomponents\u002Ftags-input",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002Fcomponents\u002Ftextarea",{"title":294,"path":295,"stem":296,"new":18,"type":19,"children":-1},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002Fcomponents\u002Ftoast",{"title":298,"path":299,"stem":300,"new":18,"type":19,"children":-1},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002Fcomponents\u002Ftoggle",{"title":302,"path":303,"stem":304,"new":18,"type":19,"children":-1},"Toggle Group","\u002Fdocs\u002Fcomponents\u002Ftoggle-group","docs\u002Fcomponents\u002Ftoggle-group",{"title":306,"path":307,"stem":308,"new":18,"type":19,"children":-1},"Tool Rail","\u002Fdocs\u002Fcomponents\u002Ftool-rail","docs\u002Fcomponents\u002Ftool-rail",{"title":310,"path":311,"stem":312,"new":18,"type":19,"children":-1},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002Fcomponents\u002Ftooltip",{"title":314,"path":315,"stem":316,"new":18,"type":19,"children":-1},"Tree","\u002Fdocs\u002Fcomponents\u002Ftree","docs\u002Fcomponents\u002Ftree",{"title":318,"path":319,"stem":320,"new":18,"type":19,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002Fcomponents\u002Ftypography",{"title":322,"path":323,"stem":324,"new":18,"type":19,"children":-1},"Vector Pad","\u002Fdocs\u002Fcomponents\u002Fvector-pad","docs\u002Fcomponents\u002Fvector-pad","group",{"title":327,"path":328,"stem":329,"children":330,"new":18,"type":325},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",[331,336,340,344,348],{"title":332,"path":333,"stem":334,"new":18,"type":335,"children":-1},"Vite","\u002Fdocs\u002Finstallation\u002Fvite","docs\u002Finstallation\u002F01.vite","page",{"title":337,"path":338,"stem":339,"new":18,"type":335,"children":-1},"Nuxt","\u002Fdocs\u002Finstallation\u002Fnuxt","docs\u002Finstallation\u002F02.nuxt",{"title":341,"path":342,"stem":343,"new":18,"type":335,"children":-1},"Astro","\u002Fdocs\u002Finstallation\u002Fastro","docs\u002Finstallation\u002F03.astro",{"title":345,"path":346,"stem":347,"new":18,"type":335,"children":-1},"Laravel","\u002Fdocs\u002Finstallation\u002Flaravel","docs\u002Finstallation\u002F04.laravel",{"title":349,"path":350,"stem":351,"new":18,"type":335,"children":-1},"Manual Installation","\u002Fdocs\u002Finstallation\u002Fmanual","docs\u002Finstallation\u002F05.manual",{"title":353,"path":354,"stem":355,"children":356,"new":18,"type":325},"Dark Mode","\u002Fdocs\u002Fdark-mode","docs\u002F05.dark-mode",[357,360,363,367],{"title":332,"path":358,"stem":359,"new":18,"type":335,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fvite","docs\u002Fdark-mode\u002F01.vite",{"title":337,"path":361,"stem":362,"new":18,"type":335,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fnuxt","docs\u002Fdark-mode\u002F02.nuxt",{"title":364,"path":365,"stem":366,"new":18,"type":335,"children":-1},"Vitepress","\u002Fdocs\u002Fdark-mode\u002Fvitepress","docs\u002Fdark-mode\u002F03.vitepress",{"title":341,"path":368,"stem":369,"new":18,"type":335,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fastro","docs\u002Fdark-mode\u002F04.astro",{"title":371,"path":372,"stem":373,"children":374,"new":18,"type":325},"Directory","\u002Fdocs\u002Fdirectory","docs\u002Fdirectory\u002Findex",[375],{"title":371,"path":372,"stem":373,"new":18,"type":335,"children":-1},{"title":377,"path":378,"stem":379,"children":380,"new":18,"type":325},"Forms","\u002Fdocs\u002Fforms","docs\u002Fforms",[381,385,389],{"title":382,"path":383,"stem":384,"new":18,"type":335,"children":-1},"VeeValidate","\u002Fdocs\u002Fforms\u002Fvee-validate","docs\u002Fforms\u002F01.vee-validate",{"title":386,"path":387,"stem":388,"new":18,"type":335,"children":-1},"TanStack Form","\u002Fdocs\u002Fforms\u002Ftanstack-form","docs\u002Fforms\u002F02.tanstack-form",{"title":390,"path":391,"stem":392,"new":18,"type":335,"children":-1},"Formisch","\u002Fdocs\u002Fforms\u002Fformisch","docs\u002Fforms\u002F03.formisch",{"title":394,"path":395,"stem":396,"children":397,"new":18,"type":325},"Registry","\u002Fdocs\u002Fregistry","docs\u002Fregistry\u002Findex",[398,399,403,407,411,415],{"title":394,"path":395,"stem":396,"new":18,"type":335,"children":-1},{"title":400,"path":401,"stem":402,"new":18,"type":335,"children":-1},"Examples","\u002Fdocs\u002Fregistry\u002Fexamples","docs\u002Fregistry\u002Fexamples",{"title":404,"path":405,"stem":406,"new":18,"type":335,"children":-1},"FAQ","\u002Fdocs\u002Fregistry\u002Ffaq","docs\u002Fregistry\u002Ffaq",{"title":408,"path":409,"stem":410,"new":18,"type":335,"children":-1},"Getting Started","\u002Fdocs\u002Fregistry\u002Fgetting-started","docs\u002Fregistry\u002Fgetting-started",{"title":412,"path":413,"stem":414,"new":18,"type":335,"children":-1},"registry-item.json","\u002Fdocs\u002Fregistry\u002Fregistry-item-json","docs\u002Fregistry\u002Fregistry-item-json",{"title":416,"path":417,"stem":418,"new":18,"type":335,"children":-1},"registry.json","\u002Fdocs\u002Fregistry\u002Fregistry-json","docs\u002Fregistry\u002Fregistry-json",{"title":420,"path":421,"stem":422,"children":423,"page":18,"type":325},"Utilities","\u002Fdocs\u002Futilities","docs\u002Futilities",[424,428],{"title":425,"path":426,"stem":427,"new":18,"type":335,"children":-1},"scroll-fade","\u002Fdocs\u002Futilities\u002Fscroll-fade","docs\u002Futilities\u002Fscroll-fade",{"title":429,"path":430,"stem":431,"new":18,"type":335,"children":-1},"shimmer","\u002Fdocs\u002Futilities\u002Fshimmer","docs\u002Futilities\u002Fshimmer",{"path":6,"stem":7,"title":433,"type":325,"children":434},"Get Started",[435,439,446,450,454,460,464,468,472,476,480,484,488,492],{"title":436,"path":437,"stem":438,"new":18,"type":335,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",{"title":327,"path":328,"stem":329,"children":440,"new":18,"type":325},[441,442,443,444,445],{"title":332,"path":333,"stem":334,"new":18,"type":335,"children":-1},{"title":337,"path":338,"stem":339,"new":18,"type":335,"children":-1},{"title":341,"path":342,"stem":343,"new":18,"type":335,"children":-1},{"title":345,"path":346,"stem":347,"new":18,"type":335,"children":-1},{"title":349,"path":350,"stem":351,"new":18,"type":335,"children":-1},{"title":447,"path":448,"stem":449,"new":18,"type":335,"children":-1},"components.json","\u002Fdocs\u002Fcomponents-json","docs\u002F03.components-json",{"title":451,"path":452,"stem":453,"new":18,"type":335,"children":-1},"Theming","\u002Fdocs\u002Ftheming","docs\u002F04.theming",{"title":353,"path":354,"stem":355,"children":455,"new":18,"type":325},[456,457,458,459],{"title":332,"path":358,"stem":359,"new":18,"type":335,"children":-1},{"title":337,"path":361,"stem":362,"new":18,"type":335,"children":-1},{"title":364,"path":365,"stem":366,"new":18,"type":335,"children":-1},{"title":341,"path":368,"stem":369,"new":18,"type":335,"children":-1},{"title":461,"path":462,"stem":463,"new":18,"type":335,"children":-1},"CLI","\u002Fdocs\u002Fcli","docs\u002F06.cli",{"title":465,"path":466,"stem":467,"new":18,"type":335,"children":-1},"JavaScript","\u002Fdocs\u002Fjavascript","docs\u002F07.javascript",{"title":469,"path":470,"stem":471,"new":18,"type":335,"children":-1},"RTL","\u002Fdocs\u002Frtl","docs\u002F08.rtl",{"title":473,"path":474,"stem":475,"new":18,"type":335,"children":-1},"Figma","\u002Fdocs\u002Ffigma","docs\u002F09.figma",{"title":477,"path":478,"stem":479,"new":18,"type":335,"children":-1},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F10.changelog",{"title":481,"path":482,"stem":483,"new":18,"type":335,"children":-1},"Legacy Docs","\u002Fdocs\u002Flegacy","docs\u002F11.legacy",{"title":485,"path":486,"stem":487,"new":18,"type":335,"children":-1},"Skills","\u002Fdocs\u002Fskills","docs\u002Fskills",{"title":489,"path":490,"stem":491,"new":18,"type":335,"children":-1},"Typeset","\u002Fdocs\u002Ftypeset","docs\u002Ftypeset",{"title":420,"path":421,"stem":422,"children":493,"page":18,"type":325},[494,495],{"title":425,"path":426,"stem":427,"new":18,"type":335,"children":-1},{"title":429,"path":430,"stem":431,"new":18,"type":335,"children":-1},{"repo":497},{"id":498,"name":499,"repo":500,"description":501,"createdAt":502,"updatedAt":503,"pushedAt":504,"stars":505,"watchers":505,"forks":505,"defaultBranch":506},1338772706,"hui-vue","Clientik\u002Fhui-vue",null,"2026-08-18T19:33:07Z","2026-08-25T22:44:28Z","2026-08-25T22:44:11Z",0,"main",{"id":508,"title":49,"body":509,"description":1476,"extension":1477,"links":501,"meta":1478,"navigation":220,"new":18,"path":50,"rawbody":1479,"seo":1480,"stem":51,"__hash__":1481},"content\u002Fdocs\u002Fcomponents\u002Fbubble.md",{"type":510,"value":511,"toc":1447},"minimark",[512,517,525,542,546,600,604,613,617,620,628,635,641,645,679,682,687,693,696,786,792,796,805,808,840,857,861,875,880,883,887,896,899,905,909,930,933,937,949,952,955,963,966,969,977,980,984,989,993,1012,1018,1023,1029,1033,1052,1058,1062,1068,1072,1085,1088,1091,1203,1206,1209,1272,1275,1278,1378,1381,1384],[513,514],"component-preview",{"name":515,"previewClass":516},"BubbleDemo","h-auto theme-blue",[518,519,520,521,524],"p",{},"The ",[522,523,49],"code",{}," component displays framed conversational content. Use it for chat text, short structured output, quoted replies, suggestions, and reactions.",[518,526,527,528,533,534,536,537,541],{},"For full-featured chat interfaces, use the ",[529,530,531],"a",{"href":182},[522,532,181],{}," component. ",[522,535,49],{}," is intentionally scoped to the bubble surface. Place avatars, names, timestamps, metadata, and message-level actions in ",[529,538,539],{"href":182},[522,540,181],{},".",[543,544,327],"h2",{"id":545},"installation",[547,548,549,564,577],"code-tabs",{},[550,551,552,558],"tabs-list",{},[553,554,556],"tabs-trigger",{"value":555},"cli",[518,557,461],{},[553,559,561],{"value":560},"manual",[518,562,563],{},"Manual",[565,566,567],"tabs-content",{"value":555},[568,569,575],"pre",{"className":570,"code":572,"language":573,"meta":574},[571],"language-bash","npx hui-kit@latest add bubble\n","bash","",[522,576,572],{"__ignoreMap":574},[565,578,579],{"value":560},[580,581,582,595],"steps",{},[583,584,585],"step",{},[518,586,587,588,594],{},"Copy and paste the ",[529,589,593],{"href":590,"rel":591},"https:\u002F\u002Fgithub.com\u002FClientik\u002Fhui-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fhui\u002Fui\u002Fbubble",[592],"nofollow","GitHub source code"," into your project.",[583,596,597],{},[518,598,599],{},"Update the import paths to match your project setup.",[543,601,603],{"id":602},"usage","Usage",[568,605,611],{"className":606,"code":608,"language":609,"meta":610},[607],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { Bubble, BubbleContent, BubbleReactions } from '@\u002Fcomponents\u002Fui\u002Fbubble'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBubble>\n    \u003CBubbleContent>\n      I checked the registry output and removed the stale route.\n    \u003C\u002FBubbleContent>\n    \u003CBubbleReactions>\n      \u003Cspan>👍\u003C\u002Fspan>\n    \u003C\u002FBubbleReactions>\n  \u003C\u002FBubble>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[522,612,608],{"__ignoreMap":574},[543,614,616],{"id":615},"composition","Composition",[518,618,619],{},"Use the following composition to build a bubble:",[568,621,626],{"className":622,"code":624,"language":625,"meta":574},[623],"language-text","Bubble\n├── BubbleContent\n└── BubbleReactions\n","text",[522,627,624],{"__ignoreMap":574},[518,629,630,631,634],{},"Use ",[522,632,633],{},"BubbleGroup"," to group consecutive bubbles from the same sender:",[568,636,639],{"className":637,"code":638,"language":625,"meta":574},[623],"BubbleGroup\n├── Bubble\n│   └── BubbleContent\n└── Bubble\n    └── BubbleContent\n",[522,640,638],{"__ignoreMap":574},[543,642,644],{"id":643},"features","Features",[646,647,648,652,655,658,661,672],"ul",{},[649,650,651],"li",{},"Seven visual variants, from a strong primary bubble to unframed ghost content",[649,653,654],{},"Start and end alignment for sender and receiver bubbles",[649,656,657],{},"Reactions that anchor to the bubble edge with configurable side and alignment",[649,659,660],{},"Bubbles size to their content, up to 80% of the container width",[649,662,663,664,667,668,671],{},"Polymorphic content via ",[522,665,666],{},"as"," or ",[522,669,670],{},"as-child"," for link and button bubbles",[649,673,674,675,678],{},"Customizable styling through the ",[522,676,677],{},"class"," prop on every part",[543,680,400],{"id":681},"examples",[683,684,686],"h3",{"id":685},"variants","Variants",[518,688,630,689,692],{},[522,690,691],{},"variant"," to change the visual treatment of the bubble.",[513,694],{"name":695,"previewClass":516},"BubbleVariantsDemo",[697,698,699,712],"table",{},[700,701,702],"thead",{},[703,704,705,709],"tr",{},[706,707,708],"th",{},"Variant",[706,710,711],{},"Description",[713,714,715,726,736,746,756,766,776],"tbody",{},[703,716,717,723],{},[718,719,720],"td",{},[522,721,722],{},"default",[718,724,725],{},"A strong primary bubble, usually for the current user.",[703,727,728,733],{},[718,729,730],{},[522,731,732],{},"secondary",[718,734,735],{},"The standard neutral bubble for conversation content.",[703,737,738,743],{},[718,739,740],{},[522,741,742],{},"muted",[718,744,745],{},"A lower-emphasis bubble for quiet supporting content.",[703,747,748,753],{},[718,749,750],{},[522,751,752],{},"tinted",[718,754,755],{},"A subtle primary-tinted bubble.",[703,757,758,763],{},[718,759,760],{},[522,761,762],{},"outline",[718,764,765],{},"A bordered bubble for secondary or rich content.",[703,767,768,773],{},[718,769,770],{},[522,771,772],{},"ghost",[718,774,775],{},"Unframed content for assistant text or rich content.",[703,777,778,783],{},[718,779,780],{},[522,781,782],{},"destructive",[718,784,785],{},"A destructive bubble for error or failed actions.",[518,787,788,789,791],{},"A bubble sizes to its content, up to 80% of the container width. The ",[522,790,772],{}," variant removes the max-width so assistant text and rich content can span the full row.",[683,793,795],{"id":794},"alignment","Alignment",[518,797,630,798,801,802,804],{},[522,799,800],{},"align"," on ",[522,803,49],{}," to align the bubble to the start or end of the conversation.",[513,806],{"name":807,"previewClass":516},"BubbleAlignmentDemo",[697,809,810,818],{},[700,811,812],{},[703,813,814,816],{},[706,815,800],{},[706,817,711],{},[713,819,820,830],{},[703,821,822,827],{},[718,823,824],{},[522,825,826],{},"start",[718,828,829],{},"Align the bubble to the start of the conversation.",[703,831,832,837],{},[718,833,834],{},[522,835,836],{},"end",[718,838,839],{},"Align the bubble to the end of the conversation.",[518,841,842,846,847,849,850,852,853,856],{},[843,844,845],"strong",{},"Note:"," When building chat interfaces, you probably want to set ",[522,848,800],{}," on the ",[522,851,181],{}," component itself. Bubbles inside ",[522,854,855],{},"MessageContent"," automatically follow the message alignment.",[683,858,860],{"id":859},"bubble-group","Bubble Group",[518,862,630,863,865,866,868,869,871,872,874],{},[522,864,633],{}," to group consecutive bubbles from the same sender. Note the ",[522,867,800],{}," prop should be set on the ",[522,870,49],{}," component itself, not the ",[522,873,633],{}," component.",[568,876,878],{"className":877,"code":638,"language":625,"meta":574},[623],[522,879,638],{"__ignoreMap":574},[513,881],{"name":882,"previewClass":516},"BubbleGroupDemo",[683,884,886],{"id":885},"links-and-buttons","Links and Buttons",[518,888,630,889,891,892,895],{},[522,890,670],{}," to merge ",[522,893,894],{},"BubbleContent"," styling and attributes onto a link or button passed through its default slot.",[513,897],{"name":898,"previewClass":516},"BubbleLinksAndButtonsDemo",[568,900,903],{"className":901,"code":902,"language":609,"meta":610},[607],"\u003Cscript setup lang=\"ts\">\nimport { Bubble, BubbleContent } from '@\u002Fcomponents\u002Fui\u002Fbubble'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBubble variant=\"muted\">\n    \u003CBubbleContent as-child>\n      \u003Cbutton type=\"button\">Click here\u003C\u002Fbutton>\n    \u003C\u002FBubbleContent>\n  \u003C\u002FBubble>\n\u003C\u002Ftemplate>\n",[522,904,902],{"__ignoreMap":574},[683,906,908],{"id":907},"reactions","Reactions",[518,910,630,911,914,915,918,919,921,922,925,926,929],{},[522,912,913],{},"BubbleReactions"," for bubble reactions. You can use it to display reactions or quick action buttons. Use ",[522,916,917],{},"side"," and ",[522,920,800],{}," to position the row — ",[522,923,924],{},"side=\"top\""," anchors it to the upper edge. Reactions overlap the bubble edge, so leave vertical space between rows — the examples below use a larger ",[522,927,928],{},"gap"," for this reason.",[513,931],{"name":932,"previewClass":516},"BubbleReactionsDemo",[683,934,936],{"id":935},"show-more-collapsible","Show More \u002F Collapsible",[518,938,939,940,944,945,948],{},"Long bubble content can be composed with ",[529,941,942],{"href":82},[522,943,81],{}," to allow for a show more or show less interaction. Use the ",[522,946,947],{},"CollapsibleTrigger"," component to trigger the collapsible content.",[513,950],{"name":951,"previewClass":516},"BubbleCollapsibleDemo",[683,953,310],{"id":954},"tooltip",[518,956,957,958,962],{},"Wrap a bubble in a ",[529,959,960],{"href":311},[522,961,310],{}," to reveal metadata on hover, such as when a message was read.",[513,964],{"name":965,"previewClass":516},"BubbleTooltipDemo",[683,967,209],{"id":968},"popover",[518,970,971,972,976],{},"Pair a bubble with a ",[529,973,974],{"href":210},[522,975,209],{}," to surface more information on demand, such as the full error message for a failed action.",[513,978],{"name":979,"previewClass":516},"BubblePopoverDemo",[543,981,983],{"id":982},"accessibility","Accessibility",[518,985,986,988],{},[522,987,49],{}," renders the presentational message surface. Keep conversation-level semantics on the surrounding container and follow the guidelines below.",[683,990,992],{"id":991},"labeling-reactions","Labeling Reactions",[518,994,995,996,999,1000,1003,1004,1007,1008,1011],{},"Reactions render as a row of emoji. A screen reader reads each glyph with no context, and counters like ",[522,997,998],{},"+8"," are announced as \"plus eight\". Group the row as a single image with a descriptive ",[522,1001,1002],{},"aria-label"," so it announces once. ",[522,1005,1006],{},"role=\"img\""," also hides the individual emoji from assistive tech, so no ",[522,1009,1010],{},"aria-hidden"," is needed.",[568,1013,1016],{"className":1014,"code":1015,"language":609,"meta":610},[607],"\u003CBubbleReactions role=\"img\" aria-label=\"Reactions: thumbs up, fire, and 8 more\">\n  \u003Cspan>👍\u003C\u002Fspan>\n  \u003Cspan>🔥\u003C\u002Fspan>\n  \u003Cspan>+8\u003C\u002Fspan>\n\u003C\u002FBubbleReactions>\n",[522,1017,1015],{"__ignoreMap":574},[518,1019,1020,1021,541],{},"When reactions are interactive, render buttons instead and give icon-only buttons an ",[522,1022,1002],{},[568,1024,1027],{"className":1025,"code":1026,"language":609,"meta":610},[607],"\u003CBubbleReactions>\n  \u003CButton aria-label=\"Thumbs up\" variant=\"secondary\" size=\"icon-xs\">\n    \u003CThumbsUpIcon \u002F>\n  \u003C\u002FButton>\n\u003C\u002FBubbleReactions>\n",[522,1028,1026],{"__ignoreMap":574},[683,1030,1032],{"id":1031},"interactive-bubbles","Interactive Bubbles",[518,1034,1035,1036,667,1039,1042,1043,1045,1046,1048,1049,1051],{},"When a bubble is clickable, pass a real ",[522,1037,1038],{},"\u003Cbutton>",[522,1040,1041],{},"\u003Ca>"," through ",[522,1044,894],{}," with ",[522,1047,670],{}," so it is focusable and exposes the correct role. ",[522,1050,894],{}," ships a visible focus ring for interactive elements, and the accessible name comes from the bubble text. No extra label is needed.",[568,1053,1056],{"className":1054,"code":1055,"language":609,"meta":610},[607],"\u003CBubble variant=\"muted\" align=\"end\">\n  \u003CBubbleContent as-child>\n    \u003Cbutton type=\"button\" @click=\"onReply\">\n      I forgot my password\n    \u003C\u002Fbutton>\n  \u003C\u002FBubbleContent>\n\u003C\u002FBubble>\n",[522,1057,1055],{"__ignoreMap":574},[683,1059,1061],{"id":1060},"meaning-beyond-color","Meaning Beyond Color",[518,1063,1064,1065,1067],{},"Bubble variants signal role and tone with color. Pair them with text, alignment, or icons so meaning is not conveyed by color alone. For a ",[522,1066,782],{}," bubble, keep the error context in the message text rather than relying on the color treatment.",[543,1069,1071],{"id":1070},"api-reference","API Reference",[518,1073,1074,1075,1078,1079,1081,1082,1084],{},"All Bubble parts render a ",[522,1076,1077],{},"\u003Cdiv>"," by default. Use ",[522,1080,666],{}," to choose another element, or ",[522,1083,670],{}," to merge the component's attributes and styles onto the single element or component in its default slot.",[683,1086,49],{"id":1087},"bubble",[518,1089,1090],{},"The root bubble wrapper.",[697,1092,1093,1108],{},[700,1094,1095],{},[703,1096,1097,1100,1103,1106],{},[706,1098,1099],{},"Prop",[706,1101,1102],{},"Type",[706,1104,1105],{},"Default",[706,1107,711],{},[713,1109,1110,1129,1148,1167,1186],{},[703,1111,1112,1116,1121,1126],{},[718,1113,1114],{},[522,1115,691],{},[718,1117,1118],{},[522,1119,1120],{},"\"default\" | \"secondary\" | \"muted\" | \"tinted\" | \"outline\" | \"ghost\" | \"destructive\"",[718,1122,1123],{},[522,1124,1125],{},"\"default\"",[718,1127,1128],{},"The bubble visual treatment.",[703,1130,1131,1135,1140,1145],{},[718,1132,1133],{},[522,1134,800],{},[718,1136,1137],{},[522,1138,1139],{},"\"start\" | \"end\"",[718,1141,1142],{},[522,1143,1144],{},"\"start\"",[718,1146,1147],{},"The inline alignment of the bubble.",[703,1149,1150,1154,1159,1164],{},[718,1151,1152],{},[522,1153,666],{},[718,1155,1156],{},[522,1157,1158],{},"string | Component",[718,1160,1161],{},[522,1162,1163],{},"\"div\"",[718,1165,1166],{},"The element or component to render.",[703,1168,1169,1173,1178,1183],{},[718,1170,1171],{},[522,1172,670],{},[718,1174,1175],{},[522,1176,1177],{},"boolean",[718,1179,1180],{},[522,1181,1182],{},"false",[718,1184,1185],{},"Render the default slot as the root and merge props onto it.",[703,1187,1188,1192,1197,1200],{},[718,1189,1190],{},[522,1191,677],{},[718,1193,1194],{},[522,1195,1196],{},"string",[718,1198,1199],{},"-",[718,1201,1202],{},"Additional classes to apply to the root element.",[683,1204,894],{"id":1205},"bubblecontent",[518,1207,1208],{},"The bubble content wrapper.",[697,1210,1211,1223],{},[700,1212,1213],{},[703,1214,1215,1217,1219,1221],{},[706,1216,1099],{},[706,1218,1102],{},[706,1220,1105],{},[706,1222,711],{},[713,1224,1225,1241,1257],{},[703,1226,1227,1231,1235,1239],{},[718,1228,1229],{},[522,1230,666],{},[718,1232,1233],{},[522,1234,1158],{},[718,1236,1237],{},[522,1238,1163],{},[718,1240,1166],{},[703,1242,1243,1247,1251,1255],{},[718,1244,1245],{},[522,1246,670],{},[718,1248,1249],{},[522,1250,1177],{},[718,1252,1253],{},[522,1254,1182],{},[718,1256,1185],{},[703,1258,1259,1263,1267,1269],{},[718,1260,1261],{},[522,1262,677],{},[718,1264,1265],{},[522,1266,1196],{},[718,1268,1199],{},[718,1270,1271],{},"Additional classes to apply to the content element.",[683,1273,913],{"id":1274},"bubblereactions",[518,1276,1277],{},"Displays overlapped reactions for a bubble.",[697,1279,1280,1292],{},[700,1281,1282],{},[703,1283,1284,1286,1288,1290],{},[706,1285,1099],{},[706,1287,1102],{},[706,1289,1105],{},[706,1291,711],{},[713,1293,1294,1313,1331,1347,1363],{},[703,1295,1296,1300,1305,1310],{},[718,1297,1298],{},[522,1299,917],{},[718,1301,1302],{},[522,1303,1304],{},"\"top\" | \"bottom\"",[718,1306,1307],{},[522,1308,1309],{},"\"bottom\"",[718,1311,1312],{},"The side of the bubble to anchor the reactions.",[703,1314,1315,1319,1323,1328],{},[718,1316,1317],{},[522,1318,800],{},[718,1320,1321],{},[522,1322,1139],{},[718,1324,1325],{},[522,1326,1327],{},"\"end\"",[718,1329,1330],{},"The inline alignment of the reactions.",[703,1332,1333,1337,1341,1345],{},[718,1334,1335],{},[522,1336,666],{},[718,1338,1339],{},[522,1340,1158],{},[718,1342,1343],{},[522,1344,1163],{},[718,1346,1166],{},[703,1348,1349,1353,1357,1361],{},[718,1350,1351],{},[522,1352,670],{},[718,1354,1355],{},[522,1356,1177],{},[718,1358,1359],{},[522,1360,1182],{},[718,1362,1185],{},[703,1364,1365,1369,1373,1375],{},[718,1366,1367],{},[522,1368,677],{},[718,1370,1371],{},[522,1372,1196],{},[718,1374,1199],{},[718,1376,1377],{},"Additional classes to apply to the reaction row.",[683,1379,633],{"id":1380},"bubblegroup",[518,1382,1383],{},"Groups consecutive bubbles from the same sender.",[697,1385,1386,1398],{},[700,1387,1388],{},[703,1389,1390,1392,1394,1396],{},[706,1391,1099],{},[706,1393,1102],{},[706,1395,1105],{},[706,1397,711],{},[713,1399,1400,1416,1432],{},[703,1401,1402,1406,1410,1414],{},[718,1403,1404],{},[522,1405,666],{},[718,1407,1408],{},[522,1409,1158],{},[718,1411,1412],{},[522,1413,1163],{},[718,1415,1166],{},[703,1417,1418,1422,1426,1430],{},[718,1419,1420],{},[522,1421,670],{},[718,1423,1424],{},[522,1425,1177],{},[718,1427,1428],{},[522,1429,1182],{},[718,1431,1185],{},[703,1433,1434,1438,1442,1444],{},[718,1435,1436],{},[522,1437,677],{},[718,1439,1440],{},[522,1441,1196],{},[718,1443,1199],{},[718,1445,1446],{},"Additional classes to apply to the group root.",{"title":574,"searchDepth":1448,"depth":1448,"links":1449},2,[1450,1451,1452,1453,1454,1465,1470],{"id":545,"depth":1448,"text":327},{"id":602,"depth":1448,"text":603},{"id":615,"depth":1448,"text":616},{"id":643,"depth":1448,"text":644},{"id":681,"depth":1448,"text":400,"children":1455},[1456,1458,1459,1460,1461,1462,1463,1464],{"id":685,"depth":1457,"text":686},3,{"id":794,"depth":1457,"text":795},{"id":859,"depth":1457,"text":860},{"id":885,"depth":1457,"text":886},{"id":907,"depth":1457,"text":908},{"id":935,"depth":1457,"text":936},{"id":954,"depth":1457,"text":310},{"id":968,"depth":1457,"text":209},{"id":982,"depth":1448,"text":983,"children":1466},[1467,1468,1469],{"id":991,"depth":1457,"text":992},{"id":1031,"depth":1457,"text":1032},{"id":1060,"depth":1457,"text":1061},{"id":1070,"depth":1448,"text":1071,"children":1471},[1472,1473,1474,1475],{"id":1087,"depth":1457,"text":49},{"id":1205,"depth":1457,"text":894},{"id":1274,"depth":1457,"text":913},{"id":1380,"depth":1457,"text":633},"Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.","md",{"component":220},"---\ntitle: Bubble\ndescription: Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.\ncomponent: true\n---\n\n::component-preview\n---\nname: BubbleDemo\npreviewClass: h-auto theme-blue\n---\n::\n\nThe `Bubble` component displays framed conversational content. Use it for chat text, short structured output, quoted replies, suggestions, and reactions.\n\nFor full-featured chat interfaces, use the [`Message`](\u002Fdocs\u002Fcomponents\u002Fmessage) component. `Bubble` is intentionally scoped to the bubble surface. Place avatars, names, timestamps, metadata, and message-level actions in [`Message`](\u002Fdocs\u002Fcomponents\u002Fmessage).\n\n\n## Installation\n\n:::::code-tabs\n\n:::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n:::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx hui-kit@latest add bubble\n```\n\n::\n\n::::tabs-content{value=\"manual\"}\n  :::steps\n    ::step\n    Copy and paste the [GitHub source code](https:\u002F\u002Fgithub.com\u002FClientik\u002Fhui-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fhui\u002Fui\u002Fbubble) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  :::\n::::\n\n:::::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Bubble, BubbleContent, BubbleReactions } from '@\u002Fcomponents\u002Fui\u002Fbubble'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBubble>\n    \u003CBubbleContent>\n      I checked the registry output and removed the stale route.\n    \u003C\u002FBubbleContent>\n    \u003CBubbleReactions>\n      \u003Cspan>👍\u003C\u002Fspan>\n    \u003C\u002FBubbleReactions>\n  \u003C\u002FBubble>\n\u003C\u002Ftemplate>\n```\n\n## Composition\n\nUse the following composition to build a bubble:\n\n```text\nBubble\n├── BubbleContent\n└── BubbleReactions\n```\n\nUse `BubbleGroup` to group consecutive bubbles from the same sender:\n\n```text\nBubbleGroup\n├── Bubble\n│   └── BubbleContent\n└── Bubble\n    └── BubbleContent\n```\n\n## Features\n\n- Seven visual variants, from a strong primary bubble to unframed ghost content\n- Start and end alignment for sender and receiver bubbles\n- Reactions that anchor to the bubble edge with configurable side and alignment\n- Bubbles size to their content, up to 80% of the container width\n- Polymorphic content via `as` or `as-child` for link and button bubbles\n- Customizable styling through the `class` prop on every part\n\n## Examples\n\n### Variants\n\nUse `variant` to change the visual treatment of the bubble.\n\n::component-preview\n---\nname: BubbleVariantsDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n| Variant       | Description                                            |\n| ------------- | ------------------------------------------------------ |\n| `default`     | A strong primary bubble, usually for the current user. |\n| `secondary`   | The standard neutral bubble for conversation content.  |\n| `muted`       | A lower-emphasis bubble for quiet supporting content.  |\n| `tinted`      | A subtle primary-tinted bubble.                        |\n| `outline`     | A bordered bubble for secondary or rich content.       |\n| `ghost`       | Unframed content for assistant text or rich content.   |\n| `destructive` | A destructive bubble for error or failed actions.      |\n\nA bubble sizes to its content, up to 80% of the container width. The `ghost` variant removes the max-width so assistant text and rich content can span the full row.\n\n### Alignment\n\nUse `align` on `Bubble` to align the bubble to the start or end of the conversation.\n\n::component-preview\n---\nname: BubbleAlignmentDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n| align   | Description                                        |\n| ------- | -------------------------------------------------- |\n| `start` | Align the bubble to the start of the conversation. |\n| `end`   | Align the bubble to the end of the conversation.   |\n\n**Note:** When building chat interfaces, you probably want to set `align` on the `Message` component itself. Bubbles inside `MessageContent` automatically follow the message alignment.\n\n### Bubble Group\n\nUse `BubbleGroup` to group consecutive bubbles from the same sender. Note the `align` prop should be set on the `Bubble` component itself, not the `BubbleGroup` component.\n\n```text\nBubbleGroup\n├── Bubble\n│   └── BubbleContent\n└── Bubble\n    └── BubbleContent\n```\n\n::component-preview\n---\nname: BubbleGroupDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n### Links and Buttons\n\nUse `as-child` to merge `BubbleContent` styling and attributes onto a link or button passed through its default slot.\n\n::component-preview\n---\nname: BubbleLinksAndButtonsDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Bubble, BubbleContent } from '@\u002Fcomponents\u002Fui\u002Fbubble'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBubble variant=\"muted\">\n    \u003CBubbleContent as-child>\n      \u003Cbutton type=\"button\">Click here\u003C\u002Fbutton>\n    \u003C\u002FBubbleContent>\n  \u003C\u002FBubble>\n\u003C\u002Ftemplate>\n```\n\n### Reactions\n\nUse `BubbleReactions` for bubble reactions. You can use it to display reactions or quick action buttons. Use `side` and `align` to position the row — `side=\"top\"` anchors it to the upper edge. Reactions overlap the bubble edge, so leave vertical space between rows — the examples below use a larger `gap` for this reason.\n\n::component-preview\n---\nname: BubbleReactionsDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n### Show More \u002F Collapsible\n\nLong bubble content can be composed with [`Collapsible`](\u002Fdocs\u002Fcomponents\u002Fcollapsible) to allow for a show more or show less interaction. Use the `CollapsibleTrigger` component to trigger the collapsible content.\n\n::component-preview\n---\nname: BubbleCollapsibleDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n### Tooltip\n\nWrap a bubble in a [`Tooltip`](\u002Fdocs\u002Fcomponents\u002Ftooltip) to reveal metadata on hover, such as when a message was read.\n\n::component-preview\n---\nname: BubbleTooltipDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n### Popover\n\nPair a bubble with a [`Popover`](\u002Fdocs\u002Fcomponents\u002Fpopover) to surface more information on demand, such as the full error message for a failed action.\n\n::component-preview\n---\nname: BubblePopoverDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n## Accessibility\n\n`Bubble` renders the presentational message surface. Keep conversation-level semantics on the surrounding container and follow the guidelines below.\n\n### Labeling Reactions\n\nReactions render as a row of emoji. A screen reader reads each glyph with no context, and counters like `+8` are announced as \"plus eight\". Group the row as a single image with a descriptive `aria-label` so it announces once. `role=\"img\"` also hides the individual emoji from assistive tech, so no `aria-hidden` is needed.\n\n```vue showLineNumbers\n\u003CBubbleReactions role=\"img\" aria-label=\"Reactions: thumbs up, fire, and 8 more\">\n  \u003Cspan>👍\u003C\u002Fspan>\n  \u003Cspan>🔥\u003C\u002Fspan>\n  \u003Cspan>+8\u003C\u002Fspan>\n\u003C\u002FBubbleReactions>\n```\n\nWhen reactions are interactive, render buttons instead and give icon-only buttons an `aria-label`.\n\n```vue showLineNumbers\n\u003CBubbleReactions>\n  \u003CButton aria-label=\"Thumbs up\" variant=\"secondary\" size=\"icon-xs\">\n    \u003CThumbsUpIcon \u002F>\n  \u003C\u002FButton>\n\u003C\u002FBubbleReactions>\n```\n\n### Interactive Bubbles\n\nWhen a bubble is clickable, pass a real `\u003Cbutton>` or `\u003Ca>` through `BubbleContent` with `as-child` so it is focusable and exposes the correct role. `BubbleContent` ships a visible focus ring for interactive elements, and the accessible name comes from the bubble text. No extra label is needed.\n\n```vue showLineNumbers\n\u003CBubble variant=\"muted\" align=\"end\">\n  \u003CBubbleContent as-child>\n    \u003Cbutton type=\"button\" @click=\"onReply\">\n      I forgot my password\n    \u003C\u002Fbutton>\n  \u003C\u002FBubbleContent>\n\u003C\u002FBubble>\n```\n\n### Meaning Beyond Color\n\nBubble variants signal role and tone with color. Pair them with text, alignment, or icons so meaning is not conveyed by color alone. For a `destructive` bubble, keep the error context in the message text rather than relying on the color treatment.\n\n## API Reference\n\nAll Bubble parts render a `\u003Cdiv>` by default. Use `as` to choose another element, or `as-child` to merge the component's attributes and styles onto the single element or component in its default slot.\n\n### Bubble\n\nThe root bubble wrapper.\n\n| Prop       | Type                                                                                       | Default     | Description                                                     |\n| ---------- | ------------------------------------------------------------------------------------------ | ----------- | --------------------------------------------------------------- |\n| `variant`  | `\"default\" \\| \"secondary\" \\| \"muted\" \\| \"tinted\" \\| \"outline\" \\| \"ghost\" \\| \"destructive\"` | `\"default\"` | The bubble visual treatment.                                    |\n| `align`    | `\"start\" \\| \"end\"`                                                                         | `\"start\"`   | The inline alignment of the bubble.                             |\n| `as`       | `string \\| Component`                                                                       | `\"div\"`     | The element or component to render.                             |\n| `as-child` | `boolean`                                                                                    | `false`     | Render the default slot as the root and merge props onto it.    |\n| `class`    | `string`                                                                                     | -           | Additional classes to apply to the root element.                |\n\n### BubbleContent\n\nThe bubble content wrapper.\n\n| Prop       | Type                 | Default | Description                                                  |\n| ---------- | -------------------- | ------- | ------------------------------------------------------------ |\n| `as`       | `string \\| Component` | `\"div\"` | The element or component to render.                          |\n| `as-child` | `boolean`            | `false` | Render the default slot as the root and merge props onto it. |\n| `class`    | `string`             | -       | Additional classes to apply to the content element.          |\n\n### BubbleReactions\n\nDisplays overlapped reactions for a bubble.\n\n| Prop       | Type                 | Default    | Description                                                  |\n| ---------- | -------------------- | ---------- | ------------------------------------------------------------ |\n| `side`     | `\"top\" \\| \"bottom\"` | `\"bottom\"` | The side of the bubble to anchor the reactions.              |\n| `align`    | `\"start\" \\| \"end\"`  | `\"end\"`    | The inline alignment of the reactions.                       |\n| `as`       | `string \\| Component` | `\"div\"`    | The element or component to render.                          |\n| `as-child` | `boolean`            | `false`    | Render the default slot as the root and merge props onto it. |\n| `class`    | `string`             | -          | Additional classes to apply to the reaction row.             |\n\n### BubbleGroup\n\nGroups consecutive bubbles from the same sender.\n\n| Prop       | Type                 | Default | Description                                                  |\n| ---------- | -------------------- | ------- | ------------------------------------------------------------ |\n| `as`       | `string \\| Component` | `\"div\"` | The element or component to render.                          |\n| `as-child` | `boolean`            | `false` | Render the default slot as the root and merge props onto it. |\n| `class`    | `string`             | -       | Additional classes to apply to the group root.               |\n",{"title":49,"description":1476},"3k6yEplyouvterwKNJnJl56M37FJuO16tGg_y1hqGVw",[1483,1484],{"title":45,"path":46,"stem":47,"children":-1},{"title":53,"path":54,"stem":55,"children":-1},1787698052734]