[{"data":1,"prerenderedAt":1346},["ShallowReactive",2],{"navigation":3,"$f1jvagmno7cfld":496,"\u002Fdocs\u002Fcomponents\u002Fmessage":507,"surround-\u002Fdocs\u002Fcomponents\u002Fmessage":1343},[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":181,"body":509,"description":1337,"extension":1338,"links":501,"meta":1339,"navigation":220,"new":18,"path":182,"rawbody":1340,"seo":1341,"stem":183,"__hash__":1342},"content\u002Fdocs\u002Fcomponents\u002Fmessage.md",{"type":510,"value":511,"toc":1311},"minimark",[512,517,525,531,535,590,594,603,618,622,625,633,640,646,650,694,697,701,710,713,752,755,763,766,770,780,783,787,793,796,800,805,809,818,824,828,840,846,850,863,866,869,962,965,968,1031,1034,1040,1103,1107,1110,1173,1176,1179,1242,1245,1248],[513,514],"component-preview",{"name":515,"previewClass":516},"MessageDemo","h-auto theme-blue",[518,519,520,521,524],"p",{},"The ",[522,523,181],"code",{}," component lays out a single message in a conversation. It handles the avatar, alignment, header, and footer around the message surface.",[518,526,527,528,530],{},"For AI apps, you can render reasoning steps, tool calls and assistant messages using the ",[522,529,181],{}," component.",[532,533,327],"h2",{"id":534},"installation",[536,537,538,553,566],"code-tabs",{},[539,540,541,547],"tabs-list",{},[542,543,545],"tabs-trigger",{"value":544},"cli",[518,546,461],{},[542,548,550],{"value":549},"manual",[518,551,552],{},"Manual",[554,555,556],"tabs-content",{"value":544},[557,558,564],"pre",{"className":559,"code":561,"language":562,"meta":563},[560],"language-bash","npx hui-kit@latest add message\n","bash","",[522,565,561],{"__ignoreMap":563},[554,567,568],{"value":549},[569,570,571,585],"steps",{},[572,573,574],"step",{},[518,575,576,577,584],{},"Copy and paste the ",[578,579,583],"a",{"href":580,"rel":581},"https:\u002F\u002Fgithub.com\u002FClientik\u002Fhui-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fhui\u002Fui\u002Fmessage",[582],"nofollow","GitHub source code"," into your project.",[572,586,587],{},[518,588,589],{},"Update the import paths to match your project setup.",[532,591,593],{"id":592},"usage","Usage",[557,595,601],{"className":596,"code":598,"language":599,"meta":600},[597],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from \"@\u002Fcomponents\u002Fui\u002Favatar\"\nimport { Bubble, BubbleContent } from \"@\u002Fcomponents\u002Fui\u002Fbubble\"\nimport { Message, MessageAvatar, MessageContent } from \"@\u002Fcomponents\u002Fui\u002Fmessage\"\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMessage>\n    \u003CMessageAvatar>\n      \u003CAvatar>\n        \u003CAvatarImage src=\"https:\u002F\u002Fgithub.com\u002Fhui.png\" alt=\"@hui\" \u002F>\n        \u003CAvatarFallback>CN\u003C\u002FAvatarFallback>\n      \u003C\u002FAvatar>\n    \u003C\u002FMessageAvatar>\n    \u003CMessageContent>\n      \u003CBubble>\n        \u003CBubbleContent>How can I help you today?\u003C\u002FBubbleContent>\n      \u003C\u002FBubble>\n    \u003C\u002FMessageContent>\n  \u003C\u002FMessage>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[522,602,598],{"__ignoreMap":563},[518,604,605,609,610,612,613,617],{},[606,607,608],"strong",{},"Note:"," ",[522,611,181],{}," owns the row layout—avatar, alignment, header, and footer.\nRender the visible message surface inside it with\n",[578,614,615],{"href":50},[522,616,49],{},".",[532,619,621],{"id":620},"composition","Composition",[518,623,624],{},"Use the following composition to build a message:",[557,626,631],{"className":627,"code":629,"language":630,"meta":563},[628],"language-text","Message\n├── MessageAvatar\n└── MessageContent\n    ├── MessageHeader\n    ├── Bubble\n    └── MessageFooter\n","text",[522,632,629],{"__ignoreMap":563},[518,634,635,636,639],{},"Use ",[522,637,638],{},"MessageGroup"," to stack consecutive messages from the same sender:",[557,641,644],{"className":642,"code":643,"language":630,"meta":563},[628],"MessageGroup\n├── Message\n└── Message\n",[522,645,643],{"__ignoreMap":563},[532,647,649],{"id":648},"features","Features",[651,652,653,661,664,667,674,677,687],"ul",{},[654,655,656,657,660],"li",{},"Start and end alignment for sender and receiver rows via the ",[522,658,659],{},"align"," prop",[654,662,663],{},"Avatar slot that anchors to the bottom of the message and stays clear of the footer",[654,665,666],{},"Header and footer slots for sender names, status, and message actions",[654,668,669,670,673],{},"Footer follows the message side; actions stay aligned on ",[522,671,672],{},"align=\"end\""," rows",[654,675,676],{},"Group wrapper for stacking consecutive messages from the same sender",[654,678,679,680,683,684],{},"Polymorphic wrappers via ",[522,681,682],{},"as"," or ",[522,685,686],{},"as-child",[654,688,689,690,693],{},"Customizable styling through the ",[522,691,692],{},"class"," prop on every part",[532,695,400],{"id":696},"examples",[698,699,37],"h3",{"id":700},"avatar",[518,702,635,703,706,707,709],{},[522,704,705],{},"MessageAvatar"," to render an avatar next to the message. Set ",[522,708,672],{}," on the message to align the avatar to the end of the message.",[513,711],{"name":712,"previewClass":516},"MessageAvatarDemo",[714,715,716,728],"table",{},[717,718,719],"thead",{},[720,721,722,725],"tr",{},[723,724,659],"th",{},[723,726,727],{},"Description",[729,730,731,742],"tbody",{},[720,732,733,739],{},[734,735,736],"td",{},[522,737,738],{},"start",[734,740,741],{},"Align the message to the start of the conversation.",[720,743,744,749],{},[734,745,746],{},[522,747,748],{},"end",[734,750,751],{},"Align the message to the end of the conversation.",[698,753,754],{"id":325},"Group",[518,756,635,757,759,760,762],{},[522,758,638],{}," to stack consecutive messages from the same sender. Render an empty ",[522,761,705],{}," on the earlier messages to keep them aligned with the avatar on the last one.",[513,764],{"name":765,"previewClass":516},"MessageGroupDemo",[698,767,769],{"id":768},"header-and-footer","Header and Footer",[518,771,635,772,775,776,779],{},[522,773,774],{},"MessageHeader"," for a sender name and ",[522,777,778],{},"MessageFooter"," for metadata such as a delivery or read status.",[513,781],{"name":782,"previewClass":516},"MessageHeaderAndFooterDemo",[698,784,786],{"id":785},"actions","Actions",[518,788,789,790,792],{},"Place message-level actions in ",[522,791,778],{},", such as copy, retry, or feedback buttons.",[513,794],{"name":795,"previewClass":516},"MessageActionsDemo",[532,797,799],{"id":798},"accessibility","Accessibility",[518,801,802,804],{},[522,803,181],{}," is a presentational layout wrapper. Accessibility comes from the content you place inside it.",[698,806,808],{"id":807},"label-icon-only-actions","Label icon-only actions",[518,810,811,812,814,815,617],{},"Action buttons in ",[522,813,778],{}," are usually icon-only, so give each one an ",[522,816,817],{},"aria-label",[557,819,822],{"className":820,"code":821,"language":599,"meta":600},[597],"\u003CMessageFooter>\n  \u003CButton variant=\"ghost\" size=\"icon\" aria-label=\"Copy\">\n    \u003CCopyIcon \u002F>\n  \u003C\u002FButton>\n\u003C\u002FMessageFooter>\n",[522,823,821],{"__ignoreMap":563},[698,825,827],{"id":826},"status-updates","Status updates",[518,829,830,831,835,836,839],{},"For in-progress messages, use a ",[578,832,833],{"href":174},[522,834,173],{}," with ",[522,837,838],{},"role=\"status\""," so assistive tech announces the update as it appears.",[557,841,844],{"className":842,"code":843,"language":599,"meta":600},[597],"\u003CMessage>\n  \u003CMarker role=\"status\">\n    \u003CMarkerIcon>\n      \u003CSpinner \u002F>\n    \u003C\u002FMarkerIcon>\n    \u003CMarkerContent>Checking the logs...\u003C\u002FMarkerContent>\n  \u003C\u002FMarker>\n\u003C\u002FMessage>\n",[522,845,843],{"__ignoreMap":563},[532,847,849],{"id":848},"api-reference","API Reference",[518,851,852,853,856,857,859,860,862],{},"All Message parts render a ",[522,854,855],{},"\u003Cdiv>"," by default. Use ",[522,858,682],{}," to choose another element, or ",[522,861,686],{}," to merge the component's attributes and styles onto the single element or component in its default slot.",[698,864,181],{"id":865},"message",[518,867,868],{},"The message row wrapper.",[714,870,871,886],{},[717,872,873],{},[720,874,875,878,881,884],{},[723,876,877],{},"Prop",[723,879,880],{},"Type",[723,882,883],{},"Default",[723,885,727],{},[729,887,888,907,926,945],{},[720,889,890,894,899,904],{},[734,891,892],{},[522,893,659],{},[734,895,896],{},[522,897,898],{},"\"start\" | \"end\"",[734,900,901],{},[522,902,903],{},"\"start\"",[734,905,906],{},"The alignment of the message in the conversation.",[720,908,909,913,918,923],{},[734,910,911],{},[522,912,682],{},[734,914,915],{},[522,916,917],{},"string | Component",[734,919,920],{},[522,921,922],{},"\"div\"",[734,924,925],{},"The element or component to render.",[720,927,928,932,937,942],{},[734,929,930],{},[522,931,686],{},[734,933,934],{},[522,935,936],{},"boolean",[734,938,939],{},[522,940,941],{},"false",[734,943,944],{},"Render the default slot as the root and merge props onto it.",[720,946,947,951,956,959],{},[734,948,949],{},[522,950,692],{},[734,952,953],{},[522,954,955],{},"string",[734,957,958],{},"-",[734,960,961],{},"Additional classes to apply to the row.",[698,963,638],{"id":964},"messagegroup",[518,966,967],{},"Groups consecutive messages from the same sender.",[714,969,970,982],{},[717,971,972],{},[720,973,974,976,978,980],{},[723,975,877],{},[723,977,880],{},[723,979,883],{},[723,981,727],{},[729,983,984,1000,1016],{},[720,985,986,990,994,998],{},[734,987,988],{},[522,989,682],{},[734,991,992],{},[522,993,917],{},[734,995,996],{},[522,997,922],{},[734,999,925],{},[720,1001,1002,1006,1010,1014],{},[734,1003,1004],{},[522,1005,686],{},[734,1007,1008],{},[522,1009,936],{},[734,1011,1012],{},[522,1013,941],{},[734,1015,944],{},[720,1017,1018,1022,1026,1028],{},[734,1019,1020],{},[522,1021,692],{},[734,1023,1024],{},[522,1025,955],{},[734,1027,958],{},[734,1029,1030],{},"Additional classes to apply to the group root.",[698,1032,705],{"id":1033},"messageavatar",[518,1035,1036,1037,1039],{},"The avatar slot, aligned to the bottom of the message. When the message has a ",[522,1038,778],{},", the avatar shifts up to stay aligned with the message surface instead of the footer.",[714,1041,1042,1054],{},[717,1043,1044],{},[720,1045,1046,1048,1050,1052],{},[723,1047,877],{},[723,1049,880],{},[723,1051,883],{},[723,1053,727],{},[729,1055,1056,1072,1088],{},[720,1057,1058,1062,1066,1070],{},[734,1059,1060],{},[522,1061,682],{},[734,1063,1064],{},[522,1065,917],{},[734,1067,1068],{},[522,1069,922],{},[734,1071,925],{},[720,1073,1074,1078,1082,1086],{},[734,1075,1076],{},[522,1077,686],{},[734,1079,1080],{},[522,1081,936],{},[734,1083,1084],{},[522,1085,941],{},[734,1087,944],{},[720,1089,1090,1094,1098,1100],{},[734,1091,1092],{},[522,1093,692],{},[734,1095,1096],{},[522,1097,955],{},[734,1099,958],{},[734,1101,1102],{},"Additional classes to apply to the avatar wrapper.",[698,1104,1106],{"id":1105},"messagecontent","MessageContent",[518,1108,1109],{},"Wraps the header, message surface, and footer.",[714,1111,1112,1124],{},[717,1113,1114],{},[720,1115,1116,1118,1120,1122],{},[723,1117,877],{},[723,1119,880],{},[723,1121,883],{},[723,1123,727],{},[729,1125,1126,1142,1158],{},[720,1127,1128,1132,1136,1140],{},[734,1129,1130],{},[522,1131,682],{},[734,1133,1134],{},[522,1135,917],{},[734,1137,1138],{},[522,1139,922],{},[734,1141,925],{},[720,1143,1144,1148,1152,1156],{},[734,1145,1146],{},[522,1147,686],{},[734,1149,1150],{},[522,1151,936],{},[734,1153,1154],{},[522,1155,941],{},[734,1157,944],{},[720,1159,1160,1164,1168,1170],{},[734,1161,1162],{},[522,1163,692],{},[734,1165,1166],{},[522,1167,955],{},[734,1169,958],{},[734,1171,1172],{},"Additional classes to apply to the content wrapper.",[698,1174,774],{"id":1175},"messageheader",[518,1177,1178],{},"Displays content above the message, such as a sender name. Aligns to the message side.",[714,1180,1181,1193],{},[717,1182,1183],{},[720,1184,1185,1187,1189,1191],{},[723,1186,877],{},[723,1188,880],{},[723,1190,883],{},[723,1192,727],{},[729,1194,1195,1211,1227],{},[720,1196,1197,1201,1205,1209],{},[734,1198,1199],{},[522,1200,682],{},[734,1202,1203],{},[522,1204,917],{},[734,1206,1207],{},[522,1208,922],{},[734,1210,925],{},[720,1212,1213,1217,1221,1225],{},[734,1214,1215],{},[522,1216,686],{},[734,1218,1219],{},[522,1220,936],{},[734,1222,1223],{},[522,1224,941],{},[734,1226,944],{},[720,1228,1229,1233,1237,1239],{},[734,1230,1231],{},[522,1232,692],{},[734,1234,1235],{},[522,1236,955],{},[734,1238,958],{},[734,1240,1241],{},"Additional classes to apply to the header.",[698,1243,778],{"id":1244},"messagefooter",[518,1246,1247],{},"Displays content below the message, such as status or actions. Aligns to the message side.",[714,1249,1250,1262],{},[717,1251,1252],{},[720,1253,1254,1256,1258,1260],{},[723,1255,877],{},[723,1257,880],{},[723,1259,883],{},[723,1261,727],{},[729,1263,1264,1280,1296],{},[720,1265,1266,1270,1274,1278],{},[734,1267,1268],{},[522,1269,682],{},[734,1271,1272],{},[522,1273,917],{},[734,1275,1276],{},[522,1277,922],{},[734,1279,925],{},[720,1281,1282,1286,1290,1294],{},[734,1283,1284],{},[522,1285,686],{},[734,1287,1288],{},[522,1289,936],{},[734,1291,1292],{},[522,1293,941],{},[734,1295,944],{},[720,1297,1298,1302,1306,1308],{},[734,1299,1300],{},[522,1301,692],{},[734,1303,1304],{},[522,1305,955],{},[734,1307,958],{},[734,1309,1310],{},"Additional classes to apply to the footer.",{"title":563,"searchDepth":1312,"depth":1312,"links":1313},2,[1314,1315,1316,1317,1318,1325,1329],{"id":534,"depth":1312,"text":327},{"id":592,"depth":1312,"text":593},{"id":620,"depth":1312,"text":621},{"id":648,"depth":1312,"text":649},{"id":696,"depth":1312,"text":400,"children":1319},[1320,1322,1323,1324],{"id":700,"depth":1321,"text":37},3,{"id":325,"depth":1321,"text":754},{"id":768,"depth":1321,"text":769},{"id":785,"depth":1321,"text":786},{"id":798,"depth":1312,"text":799,"children":1326},[1327,1328],{"id":807,"depth":1321,"text":808},{"id":826,"depth":1321,"text":827},{"id":848,"depth":1312,"text":849,"children":1330},[1331,1332,1333,1334,1335,1336],{"id":865,"depth":1321,"text":181},{"id":964,"depth":1321,"text":638},{"id":1033,"depth":1321,"text":705},{"id":1105,"depth":1321,"text":1106},{"id":1175,"depth":1321,"text":774},{"id":1244,"depth":1321,"text":778},"Displays a message in a conversation, with optional avatar, header, footer, and alignment.","md",{"component":220},"---\ntitle: Message\ndescription: Displays a message in a conversation, with optional avatar, header, footer, and alignment.\ncomponent: true\n---\n\n::component-preview\n---\nname: MessageDemo\npreviewClass: h-auto theme-blue\n---\n::\n\nThe `Message` component lays out a single message in a conversation. It handles the avatar, alignment, header, and footer around the message surface.\n\nFor AI apps, you can render reasoning steps, tool calls and assistant messages using the `Message` component.\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 message\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\u002Fmessage) 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 { Avatar, AvatarFallback, AvatarImage } from \"@\u002Fcomponents\u002Fui\u002Favatar\"\nimport { Bubble, BubbleContent } from \"@\u002Fcomponents\u002Fui\u002Fbubble\"\nimport { Message, MessageAvatar, MessageContent } from \"@\u002Fcomponents\u002Fui\u002Fmessage\"\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMessage>\n    \u003CMessageAvatar>\n      \u003CAvatar>\n        \u003CAvatarImage src=\"https:\u002F\u002Fgithub.com\u002Fhui.png\" alt=\"@hui\" \u002F>\n        \u003CAvatarFallback>CN\u003C\u002FAvatarFallback>\n      \u003C\u002FAvatar>\n    \u003C\u002FMessageAvatar>\n    \u003CMessageContent>\n      \u003CBubble>\n        \u003CBubbleContent>How can I help you today?\u003C\u002FBubbleContent>\n      \u003C\u002FBubble>\n    \u003C\u002FMessageContent>\n  \u003C\u002FMessage>\n\u003C\u002Ftemplate>\n```\n\n\n**Note:** `Message` owns the row layout—avatar, alignment, header, and footer.\nRender the visible message surface inside it with\n[`Bubble`](\u002Fdocs\u002Fcomponents\u002Fbubble).\n\n## Composition\n\nUse the following composition to build a message:\n\n```text\nMessage\n├── MessageAvatar\n└── MessageContent\n    ├── MessageHeader\n    ├── Bubble\n    └── MessageFooter\n```\n\nUse `MessageGroup` to stack consecutive messages from the same sender:\n\n```text\nMessageGroup\n├── Message\n└── Message\n```\n\n## Features\n\n- Start and end alignment for sender and receiver rows via the `align` prop\n- Avatar slot that anchors to the bottom of the message and stays clear of the footer\n- Header and footer slots for sender names, status, and message actions\n- Footer follows the message side; actions stay aligned on `align=\"end\"` rows\n- Group wrapper for stacking consecutive messages from the same sender\n- Polymorphic wrappers via `as` or `as-child`\n- Customizable styling through the `class` prop on every part\n\n## Examples\n\n### Avatar\n\nUse `MessageAvatar` to render an avatar next to the message. Set `align=\"end\"` on the message to align the avatar to the end of the message.\n\n::component-preview\n---\nname: MessageAvatarDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n| align   | Description                                         |\n| ------- | --------------------------------------------------- |\n| `start` | Align the message to the start of the conversation. |\n| `end`   | Align the message to the end of the conversation.   |\n\n### Group\n\nUse `MessageGroup` to stack consecutive messages from the same sender. Render an empty `MessageAvatar` on the earlier messages to keep them aligned with the avatar on the last one.\n\n::component-preview\n---\nname: MessageGroupDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n### Header and Footer\n\nUse `MessageHeader` for a sender name and `MessageFooter` for metadata such as a delivery or read status.\n\n::component-preview\n---\nname: MessageHeaderAndFooterDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n### Actions\n\nPlace message-level actions in `MessageFooter`, such as copy, retry, or feedback buttons.\n\n::component-preview\n---\nname: MessageActionsDemo\npreviewClass: h-auto theme-blue\n---\n::\n\n## Accessibility\n\n`Message` is a presentational layout wrapper. Accessibility comes from the content you place inside it.\n\n### Label icon-only actions\n\nAction buttons in `MessageFooter` are usually icon-only, so give each one an `aria-label`.\n\n```vue showLineNumbers\n\u003CMessageFooter>\n  \u003CButton variant=\"ghost\" size=\"icon\" aria-label=\"Copy\">\n    \u003CCopyIcon \u002F>\n  \u003C\u002FButton>\n\u003C\u002FMessageFooter>\n```\n\n### Status updates\n\nFor in-progress messages, use a [`Marker`](\u002Fdocs\u002Fcomponents\u002Fmarker) with `role=\"status\"` so assistive tech announces the update as it appears.\n\n```vue showLineNumbers\n\u003CMessage>\n  \u003CMarker role=\"status\">\n    \u003CMarkerIcon>\n      \u003CSpinner \u002F>\n    \u003C\u002FMarkerIcon>\n    \u003CMarkerContent>Checking the logs...\u003C\u002FMarkerContent>\n  \u003C\u002FMarker>\n\u003C\u002FMessage>\n```\n\n## API Reference\n\nAll Message 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### Message\n\nThe message row wrapper.\n\n| Prop       | Type                 | Default   | Description                                                  |\n| ---------- | -------------------- | --------- | ------------------------------------------------------------ |\n| `align`    | `\"start\" \\| \"end\"` | `\"start\"` | The alignment of the message in the conversation.            |\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 row.                      |\n\n### MessageGroup\n\nGroups consecutive messages 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\n### MessageAvatar\n\nThe avatar slot, aligned to the bottom of the message. When the message has a `MessageFooter`, the avatar shifts up to stay aligned with the message surface instead of the footer.\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 avatar wrapper.           |\n\n### MessageContent\n\nWraps the header, message surface, and footer.\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 wrapper.          |\n\n### MessageHeader\n\nDisplays content above the message, such as a sender name. Aligns to the message side.\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 header.                   |\n\n### MessageFooter\n\nDisplays content below the message, such as status or actions. Aligns to the message side.\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 footer.                   |\n",{"title":181,"description":1337},"aCt9TZpq9YbFc8xlOI_afKA5cjhaBReJTzJFvdBexmE",[1344,1345],{"title":177,"path":178,"stem":179,"children":-1},{"title":185,"path":186,"stem":187,"children":-1},1787698063016]