[{"data":1,"prerenderedAt":1572},["ShallowReactive",2],{"navigation":3,"$fd9cvft0wf4ga":587,"\u002Fdocs\u002Fai-elements":600,"surround-\u002Fdocs\u002Fai-elements":1569},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","\u002Fdocs","docs",[9,306,332,350,438,444,461,487,500],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":305},"Components","\u002Fdocs\u002Fcomponents","docs\u002F02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301],{"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":84,"type":19,"children":-1},"Code Block","\u002Fdocs\u002Fcomponents\u002Fcode-block","docs\u002Fcomponents\u002Fcode-block",true,{"title":86,"path":87,"stem":88,"new":18,"type":19,"children":-1},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002Fcomponents\u002Fcollapsible",{"title":90,"path":91,"stem":92,"new":18,"type":19,"children":-1},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002Fcomponents\u002Fcombobox",{"title":94,"path":95,"stem":96,"new":18,"type":19,"children":-1},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002Fcomponents\u002Fcommand",{"title":98,"path":99,"stem":100,"new":18,"type":19,"children":-1},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002Fcomponents\u002Fcontext-menu",{"title":102,"path":103,"stem":104,"new":18,"type":19,"children":-1},"Data Table","\u002Fdocs\u002Fcomponents\u002Fdata-table","docs\u002Fcomponents\u002Fdata-table",{"title":106,"path":107,"stem":108,"new":18,"type":19,"children":-1},"Date Picker","\u002Fdocs\u002Fcomponents\u002Fdate-picker","docs\u002Fcomponents\u002Fdate-picker",{"title":110,"path":111,"stem":112,"new":18,"type":19,"children":-1},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002Fcomponents\u002Fdialog",{"title":114,"path":115,"stem":116,"new":18,"type":19,"children":-1},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002Fcomponents\u002Fdrawer",{"title":118,"path":119,"stem":120,"new":18,"type":19,"children":-1},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002Fcomponents\u002Fdropdown-menu",{"title":122,"path":123,"stem":124,"new":18,"type":19,"children":-1},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002Fcomponents\u002Fempty",{"title":126,"path":127,"stem":128,"new":18,"type":19,"children":-1},"Field","\u002Fdocs\u002Fcomponents\u002Ffield","docs\u002Fcomponents\u002Ffield",{"title":130,"path":131,"stem":132,"new":18,"type":19,"children":-1},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002Fcomponents\u002Fform",{"title":134,"path":135,"stem":136,"new":18,"type":19,"children":-1},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002Fcomponents\u002Fhover-card",{"title":138,"path":139,"stem":140,"new":18,"type":19,"children":-1},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002Fcomponents\u002Finput",{"title":142,"path":143,"stem":144,"new":18,"type":19,"children":-1},"Input Group","\u002Fdocs\u002Fcomponents\u002Finput-group","docs\u002Fcomponents\u002Finput-group",{"title":146,"path":147,"stem":148,"new":18,"type":19,"children":-1},"Input OTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002Fcomponents\u002Finput-otp",{"title":150,"path":151,"stem":152,"new":18,"type":19,"children":-1},"Item","\u002Fdocs\u002Fcomponents\u002Fitem","docs\u002Fcomponents\u002Fitem",{"title":154,"path":155,"stem":156,"new":18,"type":19,"children":-1},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002Fcomponents\u002Fkbd",{"title":158,"path":159,"stem":160,"new":18,"type":19,"children":-1},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002Fcomponents\u002Flabel",{"title":162,"path":163,"stem":164,"new":18,"type":19,"children":-1},"Marker","\u002Fdocs\u002Fcomponents\u002Fmarker","docs\u002Fcomponents\u002Fmarker",{"title":166,"path":167,"stem":168,"new":18,"type":19,"children":-1},"Menubar","\u002Fdocs\u002Fcomponents\u002Fmenubar","docs\u002Fcomponents\u002Fmenubar",{"title":170,"path":171,"stem":172,"new":18,"type":19,"children":-1},"Message","\u002Fdocs\u002Fcomponents\u002Fmessage","docs\u002Fcomponents\u002Fmessage",{"title":174,"path":175,"stem":176,"new":18,"type":19,"children":-1},"Message Scroller","\u002Fdocs\u002Fcomponents\u002Fmessage-scroller","docs\u002Fcomponents\u002Fmessage-scroller",{"title":178,"path":179,"stem":180,"new":18,"type":19,"children":-1},"Native Select","\u002Fdocs\u002Fcomponents\u002Fnative-select","docs\u002Fcomponents\u002Fnative-select",{"title":182,"path":183,"stem":184,"new":18,"type":19,"children":-1},"Navigation Menu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002Fcomponents\u002Fnavigation-menu",{"title":186,"path":187,"stem":188,"new":18,"type":19,"children":-1},"Number Field","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002Fcomponents\u002Fnumber-field",{"title":190,"path":191,"stem":192,"new":18,"type":19,"children":-1},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002Fcomponents\u002Fpagination",{"title":194,"path":195,"stem":196,"new":18,"type":19,"children":-1},"Pin Input","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002Fcomponents\u002Fpin-input",{"title":198,"path":199,"stem":200,"new":18,"type":19,"children":-1},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002Fcomponents\u002Fpopover",{"title":202,"path":203,"stem":204,"new":18,"type":19,"children":-1},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002Fcomponents\u002Fprogress",{"title":206,"path":207,"stem":208,"new":84,"type":19,"children":-1},"Questionnaire","\u002Fdocs\u002Fcomponents\u002Fquestionnaire","docs\u002Fcomponents\u002Fquestionnaire",{"title":210,"path":211,"stem":212,"new":18,"type":19,"children":-1},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002Fcomponents\u002Fradio-group",{"title":214,"path":215,"stem":216,"new":18,"type":19,"children":-1},"Range Calendar","\u002Fdocs\u002Fcomponents\u002Frange-calendar","docs\u002Fcomponents\u002Frange-calendar",{"title":218,"path":219,"stem":220,"new":18,"type":19,"children":-1},"Resizable","\u002Fdocs\u002Fcomponents\u002Fresizable","docs\u002Fcomponents\u002Fresizable",{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Scroll Area","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002Fcomponents\u002Fscroll-area",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002Fcomponents\u002Fselect",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002Fcomponents\u002Fseparator",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002Fcomponents\u002Fsheet",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002Fcomponents\u002Fsidebar",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002Fcomponents\u002Fskeleton",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002Fcomponents\u002Fslider",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Sonner","\u002Fdocs\u002Fcomponents\u002Fsonner","docs\u002Fcomponents\u002Fsonner",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002Fcomponents\u002Fspinner",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002Fcomponents\u002Fstepper",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002Fcomponents\u002Fswitch",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002Fcomponents\u002Ftable",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002Fcomponents\u002Ftabs",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Tags Input","\u002Fdocs\u002Fcomponents\u002Ftags-input","docs\u002Fcomponents\u002Ftags-input",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002Fcomponents\u002Ftextarea",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002Fcomponents\u002Ftoast",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002Fcomponents\u002Ftoggle",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Toggle Group","\u002Fdocs\u002Fcomponents\u002Ftoggle-group","docs\u002Fcomponents\u002Ftoggle-group",{"title":294,"path":295,"stem":296,"new":18,"type":19,"children":-1},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002Fcomponents\u002Ftooltip",{"title":298,"path":299,"stem":300,"new":84,"type":19,"children":-1},"Trace","\u002Fdocs\u002Fcomponents\u002Ftrace","docs\u002Fcomponents\u002Ftrace",{"title":302,"path":303,"stem":304,"new":18,"type":19,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002Fcomponents\u002Ftypography","group",{"title":307,"path":308,"stem":309,"children":310,"new":18,"type":305},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",[311,316,320,324,328],{"title":312,"path":313,"stem":314,"new":18,"type":315,"children":-1},"Vite","\u002Fdocs\u002Finstallation\u002Fvite","docs\u002Finstallation\u002F01.vite","page",{"title":317,"path":318,"stem":319,"new":18,"type":315,"children":-1},"Nuxt","\u002Fdocs\u002Finstallation\u002Fnuxt","docs\u002Finstallation\u002F02.nuxt",{"title":321,"path":322,"stem":323,"new":18,"type":315,"children":-1},"Astro","\u002Fdocs\u002Finstallation\u002Fastro","docs\u002Finstallation\u002F03.astro",{"title":325,"path":326,"stem":327,"new":18,"type":315,"children":-1},"Laravel","\u002Fdocs\u002Finstallation\u002Flaravel","docs\u002Finstallation\u002F04.laravel",{"title":329,"path":330,"stem":331,"new":18,"type":315,"children":-1},"Manual Installation","\u002Fdocs\u002Finstallation\u002Fmanual","docs\u002Finstallation\u002F05.manual",{"title":333,"path":334,"stem":335,"children":336,"new":18,"type":305},"Dark Mode","\u002Fdocs\u002Fdark-mode","docs\u002F05.dark-mode",[337,340,343,347],{"title":312,"path":338,"stem":339,"new":18,"type":315,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fvite","docs\u002Fdark-mode\u002F01.vite",{"title":317,"path":341,"stem":342,"new":18,"type":315,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fnuxt","docs\u002Fdark-mode\u002F02.nuxt",{"title":344,"path":345,"stem":346,"new":18,"type":315,"children":-1},"Vitepress","\u002Fdocs\u002Fdark-mode\u002Fvitepress","docs\u002Fdark-mode\u002F03.vitepress",{"title":321,"path":348,"stem":349,"new":18,"type":315,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fastro","docs\u002Fdark-mode\u002F04.astro",{"title":351,"path":352,"stem":353,"children":354,"new":18,"type":305},"AI Elements","\u002Fdocs\u002Fai-elements","docs\u002Fai-elements",[355,359,363,367,371,375,379,383,386,390,394,398,402,406,410,414,418,422,426,430,434],{"title":356,"path":357,"stem":358,"new":84,"type":315,"children":-1},"Chain of Thought","\u002Fdocs\u002Fai-elements\u002Fchain-of-thought","docs\u002Fai-elements\u002Fchain-of-thought",{"title":360,"path":361,"stem":362,"new":84,"type":315,"children":-1},"Chat","\u002Fdocs\u002Fai-elements\u002Fchat","docs\u002Fai-elements\u002Fchat",{"title":364,"path":365,"stem":366,"new":84,"type":315,"children":-1},"Checkpoint","\u002Fdocs\u002Fai-elements\u002Fcheckpoint","docs\u002Fai-elements\u002Fcheckpoint",{"title":368,"path":369,"stem":370,"new":84,"type":315,"children":-1},"Confirmation","\u002Fdocs\u002Fai-elements\u002Fconfirmation","docs\u002Fai-elements\u002Fconfirmation",{"title":372,"path":373,"stem":374,"new":84,"type":315,"children":-1},"Context","\u002Fdocs\u002Fai-elements\u002Fcontext","docs\u002Fai-elements\u002Fcontext",{"title":376,"path":377,"stem":378,"new":84,"type":315,"children":-1},"File Tree","\u002Fdocs\u002Fai-elements\u002Ffile-tree","docs\u002Fai-elements\u002Ffile-tree",{"title":380,"path":381,"stem":382,"new":84,"type":315,"children":-1},"Inline Citation","\u002Fdocs\u002Fai-elements\u002Finline-citation","docs\u002Fai-elements\u002Finline-citation",{"title":170,"path":384,"stem":385,"new":84,"type":315,"children":-1},"\u002Fdocs\u002Fai-elements\u002Fmessage","docs\u002Fai-elements\u002Fmessage",{"title":387,"path":388,"stem":389,"new":84,"type":315,"children":-1},"Model Selector","\u002Fdocs\u002Fai-elements\u002Fmodel-selector","docs\u002Fai-elements\u002Fmodel-selector",{"title":391,"path":392,"stem":393,"new":84,"type":315,"children":-1},"Plan","\u002Fdocs\u002Fai-elements\u002Fplan","docs\u002Fai-elements\u002Fplan",{"title":395,"path":396,"stem":397,"new":84,"type":315,"children":-1},"Prompt Input","\u002Fdocs\u002Fai-elements\u002Fprompt-input","docs\u002Fai-elements\u002Fprompt-input",{"title":399,"path":400,"stem":401,"new":84,"type":315,"children":-1},"Queue","\u002Fdocs\u002Fai-elements\u002Fqueue","docs\u002Fai-elements\u002Fqueue",{"title":403,"path":404,"stem":405,"new":84,"type":315,"children":-1},"Reasoning","\u002Fdocs\u002Fai-elements\u002Freasoning","docs\u002Fai-elements\u002Freasoning",{"title":407,"path":408,"stem":409,"new":84,"type":315,"children":-1},"Sources","\u002Fdocs\u002Fai-elements\u002Fsources","docs\u002Fai-elements\u002Fsources",{"title":411,"path":412,"stem":413,"new":84,"type":315,"children":-1},"Stack Trace","\u002Fdocs\u002Fai-elements\u002Fstack-trace","docs\u002Fai-elements\u002Fstack-trace",{"title":415,"path":416,"stem":417,"new":84,"type":315,"children":-1},"Subagent","\u002Fdocs\u002Fai-elements\u002Fsubagent","docs\u002Fai-elements\u002Fsubagent",{"title":419,"path":420,"stem":421,"new":84,"type":315,"children":-1},"Suggestion","\u002Fdocs\u002Fai-elements\u002Fsuggestion","docs\u002Fai-elements\u002Fsuggestion",{"title":423,"path":424,"stem":425,"new":84,"type":315,"children":-1},"Task","\u002Fdocs\u002Fai-elements\u002Ftask","docs\u002Fai-elements\u002Ftask",{"title":427,"path":428,"stem":429,"new":84,"type":315,"children":-1},"Terminal","\u002Fdocs\u002Fai-elements\u002Fterminal","docs\u002Fai-elements\u002Fterminal",{"title":431,"path":432,"stem":433,"new":84,"type":315,"children":-1},"Test Results","\u002Fdocs\u002Fai-elements\u002Ftest-results","docs\u002Fai-elements\u002Ftest-results",{"title":435,"path":436,"stem":437,"new":84,"type":315,"children":-1},"Tool","\u002Fdocs\u002Fai-elements\u002Ftool","docs\u002Fai-elements\u002Ftool",{"title":439,"path":440,"stem":441,"children":442,"new":18,"type":305},"Directory","\u002Fdocs\u002Fdirectory","docs\u002Fdirectory\u002Findex",[443],{"title":439,"path":440,"stem":441,"new":18,"type":315,"children":-1},{"title":445,"path":446,"stem":447,"children":448,"new":18,"type":305},"Forms","\u002Fdocs\u002Fforms","docs\u002Fforms",[449,453,457],{"title":450,"path":451,"stem":452,"new":18,"type":315,"children":-1},"VeeValidate","\u002Fdocs\u002Fforms\u002Fvee-validate","docs\u002Fforms\u002F01.vee-validate",{"title":454,"path":455,"stem":456,"new":18,"type":315,"children":-1},"TanStack Form","\u002Fdocs\u002Fforms\u002Ftanstack-form","docs\u002Fforms\u002F02.tanstack-form",{"title":458,"path":459,"stem":460,"new":18,"type":315,"children":-1},"Formisch","\u002Fdocs\u002Fforms\u002Fformisch","docs\u002Fforms\u002F03.formisch",{"title":462,"path":463,"stem":464,"children":465,"new":18,"type":305},"Registry","\u002Fdocs\u002Fregistry","docs\u002Fregistry\u002Findex",[466,467,471,475,479,483],{"title":462,"path":463,"stem":464,"new":18,"type":315,"children":-1},{"title":468,"path":469,"stem":470,"new":18,"type":315,"children":-1},"Examples","\u002Fdocs\u002Fregistry\u002Fexamples","docs\u002Fregistry\u002Fexamples",{"title":472,"path":473,"stem":474,"new":18,"type":315,"children":-1},"FAQ","\u002Fdocs\u002Fregistry\u002Ffaq","docs\u002Fregistry\u002Ffaq",{"title":476,"path":477,"stem":478,"new":18,"type":315,"children":-1},"Getting Started","\u002Fdocs\u002Fregistry\u002Fgetting-started","docs\u002Fregistry\u002Fgetting-started",{"title":480,"path":481,"stem":482,"new":18,"type":315,"children":-1},"registry-item.json","\u002Fdocs\u002Fregistry\u002Fregistry-item-json","docs\u002Fregistry\u002Fregistry-item-json",{"title":484,"path":485,"stem":486,"new":18,"type":315,"children":-1},"registry.json","\u002Fdocs\u002Fregistry\u002Fregistry-json","docs\u002Fregistry\u002Fregistry-json",{"title":488,"path":489,"stem":490,"children":491,"page":18,"type":305},"Utilities","\u002Fdocs\u002Futilities","docs\u002Futilities",[492,496],{"title":493,"path":494,"stem":495,"new":18,"type":315,"children":-1},"scroll-fade","\u002Fdocs\u002Futilities\u002Fscroll-fade","docs\u002Futilities\u002Fscroll-fade",{"title":497,"path":498,"stem":499,"new":18,"type":315,"children":-1},"shimmer","\u002Fdocs\u002Futilities\u002Fshimmer","docs\u002Futilities\u002Fshimmer",{"path":6,"stem":7,"title":501,"type":305,"children":502},"Get Started",[503,507,514,518,522,528,532,536,540,544,548,552,575,579,583],{"title":504,"path":505,"stem":506,"new":18,"type":315,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",{"title":307,"path":308,"stem":309,"children":508,"new":18,"type":305},[509,510,511,512,513],{"title":312,"path":313,"stem":314,"new":18,"type":315,"children":-1},{"title":317,"path":318,"stem":319,"new":18,"type":315,"children":-1},{"title":321,"path":322,"stem":323,"new":18,"type":315,"children":-1},{"title":325,"path":326,"stem":327,"new":18,"type":315,"children":-1},{"title":329,"path":330,"stem":331,"new":18,"type":315,"children":-1},{"title":515,"path":516,"stem":517,"new":18,"type":315,"children":-1},"components.json","\u002Fdocs\u002Fcomponents-json","docs\u002F03.components-json",{"title":519,"path":520,"stem":521,"new":18,"type":315,"children":-1},"Theming","\u002Fdocs\u002Ftheming","docs\u002F04.theming",{"title":333,"path":334,"stem":335,"children":523,"new":18,"type":305},[524,525,526,527],{"title":312,"path":338,"stem":339,"new":18,"type":315,"children":-1},{"title":317,"path":341,"stem":342,"new":18,"type":315,"children":-1},{"title":344,"path":345,"stem":346,"new":18,"type":315,"children":-1},{"title":321,"path":348,"stem":349,"new":18,"type":315,"children":-1},{"title":529,"path":530,"stem":531,"new":18,"type":315,"children":-1},"CLI","\u002Fdocs\u002Fcli","docs\u002F06.cli",{"title":533,"path":534,"stem":535,"new":18,"type":315,"children":-1},"JavaScript","\u002Fdocs\u002Fjavascript","docs\u002F07.javascript",{"title":537,"path":538,"stem":539,"new":18,"type":315,"children":-1},"RTL","\u002Fdocs\u002Frtl","docs\u002F08.rtl",{"title":541,"path":542,"stem":543,"new":18,"type":315,"children":-1},"Figma","\u002Fdocs\u002Ffigma","docs\u002F09.figma",{"title":545,"path":546,"stem":547,"new":18,"type":315,"children":-1},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F10.changelog",{"title":549,"path":550,"stem":551,"new":18,"type":315,"children":-1},"Legacy Docs","\u002Fdocs\u002Flegacy","docs\u002F11.legacy",{"title":351,"path":352,"stem":353,"children":553,"new":18,"type":305},[554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574],{"title":356,"path":357,"stem":358,"new":84,"type":315,"children":-1},{"title":360,"path":361,"stem":362,"new":84,"type":315,"children":-1},{"title":364,"path":365,"stem":366,"new":84,"type":315,"children":-1},{"title":368,"path":369,"stem":370,"new":84,"type":315,"children":-1},{"title":372,"path":373,"stem":374,"new":84,"type":315,"children":-1},{"title":376,"path":377,"stem":378,"new":84,"type":315,"children":-1},{"title":380,"path":381,"stem":382,"new":84,"type":315,"children":-1},{"title":170,"path":384,"stem":385,"new":84,"type":315,"children":-1},{"title":387,"path":388,"stem":389,"new":84,"type":315,"children":-1},{"title":391,"path":392,"stem":393,"new":84,"type":315,"children":-1},{"title":395,"path":396,"stem":397,"new":84,"type":315,"children":-1},{"title":399,"path":400,"stem":401,"new":84,"type":315,"children":-1},{"title":403,"path":404,"stem":405,"new":84,"type":315,"children":-1},{"title":407,"path":408,"stem":409,"new":84,"type":315,"children":-1},{"title":411,"path":412,"stem":413,"new":84,"type":315,"children":-1},{"title":415,"path":416,"stem":417,"new":84,"type":315,"children":-1},{"title":419,"path":420,"stem":421,"new":84,"type":315,"children":-1},{"title":423,"path":424,"stem":425,"new":84,"type":315,"children":-1},{"title":427,"path":428,"stem":429,"new":84,"type":315,"children":-1},{"title":431,"path":432,"stem":433,"new":84,"type":315,"children":-1},{"title":435,"path":436,"stem":437,"new":84,"type":315,"children":-1},{"title":576,"path":577,"stem":578,"new":18,"type":315,"children":-1},"Skills","\u002Fdocs\u002Fskills","docs\u002Fskills",{"title":580,"path":581,"stem":582,"new":18,"type":315,"children":-1},"Typeset","\u002Fdocs\u002Ftypeset","docs\u002Ftypeset",{"title":488,"path":489,"stem":490,"children":584,"page":18,"type":305},[585,586],{"title":493,"path":494,"stem":495,"new":18,"type":315,"children":-1},{"title":497,"path":498,"stem":499,"new":18,"type":315,"children":-1},{"repo":588},{"id":589,"name":590,"repo":591,"description":592,"createdAt":593,"updatedAt":594,"pushedAt":595,"stars":596,"watchers":597,"forks":598,"defaultBranch":599},658791894,"shadcn-vue","unovue\u002Fshadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-10-15T03:21:33Z","2026-10-14T03:11:00Z",10691,36,681,"dev",{"id":601,"title":351,"body":602,"description":1562,"extension":1563,"links":1564,"meta":1565,"navigation":84,"new":18,"path":352,"rawbody":1566,"seo":1567,"stem":353,"__hash__":1568},"content\u002Fdocs\u002Fai-elements.md",{"type":603,"value":604,"toc":1551},"minimark",[605,609,634,653,658,887,890,897,902,905,916,934,938,941,1245,1249,1252,1261,1492,1496,1499,1537],[606,607,608],"p",{},"AI Elements are patterns for building agentic interfaces. Each one is a composition of shadcn-vue components that you copy into your project. There is no package to install. The code is yours.",[606,610,611,612,615,616,618,619,621,622,624,625,627,628,630,631,633],{},"A ",[613,614,360],"a",{"href":361}," is a list of ",[613,617,170],{"href":384}," turns inside a ",[613,620,174],{"href":175},". The steps an agent takes inside a turn, like ",[613,623,403],{"href":404},", ",[613,626,435],{"href":436}," and ",[613,629,391],{"href":392},", are built on ",[613,632,298],{"href":299},", so every step has the same shape.",[606,635,636,647,648,652],{},[637,638,639,640,646],"strong",{},"Coming from ",[613,641,645],{"href":642,"rel":643},"https:\u002F\u002Fwww.ai-elements-vue.com",[644],"nofollow","ai-elements-vue.com","?"," See ",[613,649,651],{"href":650},"#migrating-from-ai-elements-vue","Migrating from AI Elements Vue",".",[654,655,657],"h2",{"id":656},"patterns","Patterns",[659,660,666,667,666,687,666,697,666,707,666,717,666,727,666,737,666,747,666,757,666,767,666,777,666,787,666,797,666,807,666,817,666,827,666,837,666,847,666,857,666,867,666,877],"div",{"className":661},[662,663,664,665],"mt-6","grid","gap-4","sm:grid-cols-2","\n  ",[668,669,676,677,676,681,666],"linked-card",{"href":357,"className":670},[671,672,673,674,675],"items-start","gap-1","p-6","text-sm","sm:p-6","\n    ",[659,678,356],{"className":679},[680],"font-medium",[659,682,686],{"className":683},[684,685],"leading-relaxed","text-muted-foreground","A summary that expands into the steps an agent took.",[668,688,676,690,676,693,666],{"href":361,"className":689},[671,672,673,674,675],[659,691,360],{"className":692},[680],[659,694,696],{"className":695},[684,685],"The thread. Message Scroller keeps your place while the reply streams.",[668,698,676,700,676,703,666],{"href":365,"className":699},[671,672,673,674,675],[659,701,364],{"className":702},[680],[659,704,706],{"className":705},[684,685],"A point in the conversation you can return to.",[668,708,676,710,676,713,666],{"href":369,"className":709},[671,672,673,674,675],[659,711,368],{"className":712},[680],[659,714,716],{"className":715},[684,685],"A prompt to approve or deny a tool before it runs.",[668,718,676,720,676,723,666],{"href":373,"className":719},[671,672,673,674,675],[659,721,372],{"className":722},[680],[659,724,726],{"className":725},[684,685],"How much of the context window the conversation has used.",[668,728,676,730,676,733,666],{"href":377,"className":729},[671,672,673,674,675],[659,731,376],{"className":732},[680],[659,734,736],{"className":735},[684,685],"The files the agent changed, as a folder tree.",[668,738,676,740,676,743,666],{"href":381,"className":739},[671,672,673,674,675],[659,741,380],{"className":742},[680],[659,744,746],{"className":745},[684,685],"A source in the sentence that opens on hover.",[668,748,676,750,676,753,666],{"href":384,"className":749},[671,672,673,674,675],[659,751,170],{"className":752},[680],[659,754,756],{"className":755},[684,685],"One turn. The person's message, and the agent's reply with its actions.",[668,758,676,760,676,763,666],{"href":388,"className":759},[671,672,673,674,675],[659,761,387],{"className":762},[680],[659,764,766],{"className":765},[684,685],"Two menus. One picks the model the agent runs, the other picks how hard it thinks.",[668,768,676,770,676,773,666],{"href":392,"className":769},[671,672,673,674,675],[659,771,391],{"className":772},[680],[659,774,776],{"className":775},[684,685],"The steps the agent plans to take, and how far it has got.",[668,778,676,780,676,783,666],{"href":396,"className":779},[671,672,673,674,675],[659,781,395],{"className":782},[680],[659,784,786],{"className":785},[684,685],"A message field with attachments and a send button.",[668,788,676,790,676,793,666],{"href":400,"className":789},[671,672,673,674,675],[659,791,399],{"className":792},[680],[659,794,796],{"className":795},[684,685],"The agent's todo list, split into what is left and what is done.",[668,798,676,800,676,803,666],{"href":404,"className":799},[671,672,673,674,675],[659,801,403],{"className":802},[680],[659,804,806],{"className":805},[684,685],"The agent's thinking as it streams.",[668,808,676,810,676,813,666],{"href":408,"className":809},[671,672,673,674,675],[659,811,407],{"className":812},[680],[659,814,816],{"className":815},[684,685],"The links the agent used for a reply.",[668,818,676,820,676,823,666],{"href":412,"className":819},[671,672,673,674,675],[659,821,411],{"className":822},[680],[659,824,826],{"className":825},[684,685],"A failed tool call and its stack frames.",[668,828,676,830,676,833,666],{"href":416,"className":829},[671,672,673,674,675],[659,831,415],{"className":832},[680],[659,834,836],{"className":835},[684,685],"A subagent run, with its tool calls and result.",[668,838,676,840,676,843,666],{"href":420,"className":839},[671,672,673,674,675],[659,841,419],{"className":842},[680],[659,844,846],{"className":845},[684,685],"A short prompt you can send to the agent in one click.",[668,848,676,850,676,853,666],{"href":424,"className":849},[671,672,673,674,675],[659,851,423],{"className":852},[680],[659,854,856],{"className":855},[684,685],"The steps the agent takes, as it takes them.",[668,858,676,860,676,863,666],{"href":428,"className":859},[671,672,673,674,675],[659,861,427],{"className":862},[680],[659,864,866],{"className":865},[684,685],"A command the agent runs, with its output as it streams.",[668,868,676,870,676,873,666],{"href":432,"className":869},[671,672,673,674,675],[659,871,431],{"className":872},[680],[659,874,876],{"className":875},[684,685],"A test run by the agent, with its suites and failures.",[668,878,676,880,676,883,666],{"href":436,"className":879},[671,672,673,674,675],[659,881,435],{"className":882},[680],[659,884,886],{"className":885},[684,685],"A tool call the agent makes, from input to output.",[654,888,651],{"id":889},"migrating-from-ai-elements-vue",[606,891,892,893,896],{},"If you used AI Elements Vue from ",[613,894,645],{"href":642,"rel":895},[644],", here is what changes.",[898,899,901],"h3",{"id":900},"existing-projects","Existing projects",[606,903,904],{},"You do not need to migrate. When you installed components from ai-elements-vue.com, the code was copied into your project. It is yours, and it keeps working as is.",[606,906,907,908,910,911,915],{},"To move a wrapper onto shadcn-vue components, use the prompt in the ",[637,909,651],{}," section of its pattern page. Paste it into your coding agent. It rebuilds the folder in ",[912,913,914],"code",{},"components\u002Fai-elements"," on Trace, Code Block and the other shadcn-vue components, and keeps every export and its props, so the code that uses it does not change.",[606,917,918,919,922,923,926,927,922,930,933],{},"For example, the ",[613,920,399],{"href":921},"\u002Fdocs\u002Fai-elements\u002Fqueue#migrating-from-ai-elements-vue"," prompt rebuilds ",[912,924,925],{},"queue\u002F"," on Trace, and the ",[613,928,380],{"href":929},"\u002Fdocs\u002Fai-elements\u002Finline-citation#migrating-from-ai-elements-vue",[912,931,932],{},"inline-citation\u002F"," on Hover Card.",[898,935,937],{"id":936},"what-replaces-each-element","What replaces each element",[606,939,940],{},"Each folder from AI Elements Vue, and the shadcn-vue pattern or component that replaces it.",[942,943,944,956],"table",{},[945,946,947],"thead",{},[948,949,950,954],"tr",{},[951,952,953],"th",{},"AI Elements Vue",[951,955,590],{},[957,958,959,971,982,993,1004,1015,1027,1038,1049,1060,1071,1081,1092,1103,1114,1125,1136,1146,1157,1168,1179,1190,1201,1212,1223,1234],"tbody",{},[948,960,961,967],{},[962,963,964],"td",{},[912,965,966],{},"agent\u002F",[962,968,969],{},[613,970,415],{"href":416},[948,972,973,978],{},[962,974,975],{},[912,976,977],{},"attachments\u002F",[962,979,980],{},[613,981,33],{"href":34},[948,983,984,989],{},[962,985,986],{},[912,987,988],{},"chain-of-thought\u002F",[962,990,991],{},[613,992,356],{"href":357},[948,994,995,1000],{},[962,996,997],{},[912,998,999],{},"checkpoint\u002F",[962,1001,1002],{},[613,1003,364],{"href":365},[948,1005,1006,1011],{},[962,1007,1008],{},[912,1009,1010],{},"code-block\u002F",[962,1012,1013],{},[613,1014,81],{"href":82},[948,1016,1017,1022],{},[962,1018,1019],{},[912,1020,1021],{},"commit\u002F",[962,1023,1024],{},[613,1025,298],{"href":1026},"\u002Fdocs\u002Fcomponents\u002Ftrace#commit",[948,1028,1029,1034],{},[962,1030,1031],{},[912,1032,1033],{},"confirmation\u002F",[962,1035,1036],{},[613,1037,368],{"href":369},[948,1039,1040,1045],{},[962,1041,1042],{},[912,1043,1044],{},"context\u002F",[962,1046,1047],{},[613,1048,372],{"href":373},[948,1050,1051,1056],{},[962,1052,1053],{},[912,1054,1055],{},"conversation\u002F",[962,1057,1058],{},[613,1059,360],{"href":361},[948,1061,1062,1067],{},[962,1063,1064],{},[912,1065,1066],{},"file-tree\u002F",[962,1068,1069],{},[613,1070,376],{"href":377},[948,1072,1073,1077],{},[962,1074,1075],{},[912,1076,932],{},[962,1078,1079],{},[613,1080,380],{"href":381},[948,1082,1083,1088],{},[962,1084,1085],{},[912,1086,1087],{},"loader\u002F",[962,1089,1090],{},[613,1091,254],{"href":255},[948,1093,1094,1099],{},[962,1095,1096],{},[912,1097,1098],{},"message\u002F",[962,1100,1101],{},[613,1102,170],{"href":384},[948,1104,1105,1110],{},[962,1106,1107],{},[912,1108,1109],{},"model-selector\u002F",[962,1111,1112],{},[613,1113,387],{"href":388},[948,1115,1116,1121],{},[962,1117,1118],{},[912,1119,1120],{},"plan\u002F",[962,1122,1123],{},[613,1124,391],{"href":392},[948,1126,1127,1132],{},[962,1128,1129],{},[912,1130,1131],{},"prompt-input\u002F",[962,1133,1134],{},[613,1135,395],{"href":396},[948,1137,1138,1142],{},[962,1139,1140],{},[912,1141,925],{},[962,1143,1144],{},[613,1145,399],{"href":400},[948,1147,1148,1153],{},[962,1149,1150],{},[912,1151,1152],{},"reasoning\u002F",[962,1154,1155],{},[613,1156,403],{"href":404},[948,1158,1159,1164],{},[962,1160,1161],{},[912,1162,1163],{},"shimmer\u002F",[962,1165,1166],{},[613,1167,497],{"href":498},[948,1169,1170,1175],{},[962,1171,1172],{},[912,1173,1174],{},"sources\u002F",[962,1176,1177],{},[613,1178,407],{"href":408},[948,1180,1181,1186],{},[962,1182,1183],{},[912,1184,1185],{},"stack-trace\u002F",[962,1187,1188],{},[613,1189,411],{"href":412},[948,1191,1192,1197],{},[962,1193,1194],{},[912,1195,1196],{},"suggestion\u002F",[962,1198,1199],{},[613,1200,419],{"href":420},[948,1202,1203,1208],{},[962,1204,1205],{},[912,1206,1207],{},"task\u002F",[962,1209,1210],{},[613,1211,423],{"href":424},[948,1213,1214,1219],{},[962,1215,1216],{},[912,1217,1218],{},"terminal\u002F",[962,1220,1221],{},[613,1222,427],{"href":428},[948,1224,1225,1230],{},[962,1226,1227],{},[912,1228,1229],{},"test-results\u002F",[962,1231,1232],{},[613,1233,431],{"href":432},[948,1235,1236,1241],{},[962,1237,1238],{},[912,1239,1240],{},"tool\u002F",[962,1242,1243],{},[613,1244,435],{"href":436},[898,1246,1248],{"id":1247},"elements-without-a-replacement","Elements without a replacement",[606,1250,1251],{},"We did not rebuild these elements. Few projects use them, and each one is also a small composition you can build from components shadcn-vue already has, listed below.",[606,1253,1254,1255,1260],{},"Your copy keeps working. If you still need one of these, ",[613,1256,1259],{"href":1257,"rel":1258},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Fissues\u002Fnew\u002Fchoose",[644],"open an issue"," and we will help you build it.",[942,1262,1263,1272],{},[945,1264,1265],{},[948,1266,1267,1269],{},[951,1268,953],{},[951,1270,1271],{},"Build it with",[957,1273,1274,1289,1307,1344,1359,1372,1386,1397,1410,1425,1440,1455,1466,1480],{},[948,1275,1276,1281],{},[962,1277,1278],{},[912,1279,1280],{},"artifact\u002F",[962,1282,1283,624,1285,627,1287],{},[613,1284,65],{"href":66},[613,1286,53],{"href":54},[613,1288,294],{"href":295},[948,1290,1291,1296],{},[962,1292,1293],{},[912,1294,1295],{},"audio-player\u002F",[962,1297,1298,1299,1302,1303,627,1305],{},"An ",[912,1300,1301],{},"audio"," element, with ",[613,1304,57],{"href":58},[613,1306,246],{"href":247},[948,1308,1309,1332],{},[962,1310,1311,624,1314,624,1317,624,1320,624,1323,624,1326,627,1329],{},[912,1312,1313],{},"canvas\u002F",[912,1315,1316],{},"connection\u002F",[912,1318,1319],{},"controls\u002F",[912,1321,1322],{},"edge\u002F",[912,1324,1325],{},"node\u002F",[912,1327,1328],{},"panel\u002F",[912,1330,1331],{},"toolbar\u002F",[962,1333,1334,1339,1340,627,1342],{},[613,1335,1338],{"href":1336,"rel":1337},"https:\u002F\u002Fvueflow.dev",[644],"Vue Flow",", with ",[613,1341,65],{"href":66},[613,1343,57],{"href":58},[948,1345,1346,1351],{},[962,1347,1348],{},[912,1349,1350],{},"environment-variables\u002F",[962,1352,1353,624,1355,627,1357],{},[613,1354,150],{"href":151},[613,1356,41],{"href":42},[613,1358,262],{"href":263},[948,1360,1361,1366],{},[962,1362,1363],{},[912,1364,1365],{},"image\u002F",[962,1367,1298,1368,1371],{},[912,1369,1370],{},"img"," element",[948,1373,1374,1382],{},[962,1375,1376,627,1379],{},[912,1377,1378],{},"mic-selector\u002F",[912,1380,1381],{},"voice-selector\u002F",[962,1383,1384],{},[613,1385,90],{"href":91},[948,1387,1388,1393],{},[962,1389,1390],{},[912,1391,1392],{},"open-in-chat\u002F",[962,1394,1395],{},[613,1396,118],{"href":119},[948,1398,1399,1404],{},[962,1400,1401],{},[912,1402,1403],{},"package-info\u002F",[962,1405,1406,627,1408],{},[613,1407,150],{"href":151},[613,1409,41],{"href":42},[948,1411,1412,1417],{},[962,1413,1414],{},[912,1415,1416],{},"persona\u002F",[962,1418,611,1419,1424],{},[613,1420,1423],{"href":1421,"rel":1422},"https:\u002F\u002Frive.app",[644],"Rive"," animation",[948,1426,1427,1432],{},[962,1428,1429],{},[912,1430,1431],{},"sandbox\u002F",[962,1433,1434,624,1436,627,1438],{},[613,1435,298],{"href":299},[613,1437,270],{"href":271},[613,1439,81],{"href":82},[948,1441,1442,1447],{},[962,1443,1444],{},[912,1445,1446],{},"schema-display\u002F",[962,1448,1449,624,1451,627,1453],{},[613,1450,86],{"href":87},[613,1452,41],{"href":42},[613,1454,81],{"href":82},[948,1456,1457,1462],{},[962,1458,1459],{},[912,1460,1461],{},"snippet\u002F",[962,1463,1464],{},[613,1465,142],{"href":143},[948,1467,1468,1473],{},[962,1469,1470],{},[912,1471,1472],{},"speech-input\u002F",[962,1474,1475,627,1477,1479],{},[613,1476,53],{"href":54},[613,1478,254],{"href":255},", with the Web Speech API",[948,1481,1482,1487],{},[962,1483,1484],{},[912,1485,1486],{},"transcription\u002F",[962,1488,611,1489,1491],{},[613,1490,53],{"href":54}," for each segment, to seek to it",[898,1493,1495],{"id":1494},"new-projects","New projects",[606,1497,1498],{},"Build from shadcn-vue components instead.",[1500,1501,1502,1508,1518,1523,1526,1529],"steps",{},[1503,1504,1505],"step",{},[606,1506,1507],{},"Add the components",[1509,1510,1516],"pre",{"className":1511,"code":1513,"language":1514,"meta":1515},[1512],"language-bash","npx shadcn-vue@latest add trace code-block\n","bash","",[912,1517,1513],{"__ignoreMap":1515},[1503,1519,1520],{},[606,1521,1522],{},"Copy a pattern",[606,1524,1525],{},"Open a pattern above and copy its code into your project. Each page lists any other components it needs.",[606,1527,1528],{},"Or ask your coding agent to do it:",[1509,1530,1535],{"className":1531,"code":1533,"language":1534,"meta":1515},[1532],"language-txt","Add the Reasoning pattern from https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fai-elements\u002Freasoning to my chat.\n","txt",[912,1536,1533],{"__ignoreMap":1515},[1538,1539,1540],"callout",{},[606,1541,1542,1545,1546,1550],{},[637,1543,1544],{},"Missing an element?"," ",[613,1547,1549],{"href":1257,"rel":1548},[644],"Open an issue"," and tell us what you need.",{"title":1515,"searchDepth":1552,"depth":1552,"links":1553},2,[1554,1555],{"id":656,"depth":1552,"text":657},{"id":889,"depth":1552,"text":651,"children":1556},[1557,1559,1560,1561],{"id":900,"depth":1558,"text":901},3,{"id":936,"depth":1558,"text":937},{"id":1247,"depth":1558,"text":1248},{"id":1494,"depth":1558,"text":1495},"Patterns for agentic interfaces, built from shadcn-vue components.","md",null,{},"---\ntitle: AI Elements\ndescription: Patterns for agentic interfaces, built from shadcn-vue components.\n---\n\nAI Elements are patterns for building agentic interfaces. Each one is a composition of shadcn-vue components that you copy into your project. There is no package to install. The code is yours.\n\nA [Chat](\u002Fdocs\u002Fai-elements\u002Fchat) is a list of [Message](\u002Fdocs\u002Fai-elements\u002Fmessage) turns inside a [Message Scroller](\u002Fdocs\u002Fcomponents\u002Fmessage-scroller). The steps an agent takes inside a turn, like [Reasoning](\u002Fdocs\u002Fai-elements\u002Freasoning), [Tool](\u002Fdocs\u002Fai-elements\u002Ftool) and [Plan](\u002Fdocs\u002Fai-elements\u002Fplan), are built on [Trace](\u002Fdocs\u002Fcomponents\u002Ftrace), so every step has the same shape.\n\n**Coming from [ai-elements-vue.com](https:\u002F\u002Fwww.ai-elements-vue.com)?** See [Migrating from AI Elements Vue](#migrating-from-ai-elements-vue).\n\n## Patterns\n\n\u003Cdiv class=\"mt-6 grid gap-4 sm:grid-cols-2\">\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fchain-of-thought\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Chain of Thought\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A summary that expands into the steps an agent took.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fchat\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Chat\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">The thread. Message Scroller keeps your place while the reply streams.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fcheckpoint\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Checkpoint\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A point in the conversation you can return to.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fconfirmation\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Confirmation\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A prompt to approve or deny a tool before it runs.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fcontext\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Context\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">How much of the context window the conversation has used.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Ffile-tree\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">File Tree\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">The files the agent changed, as a folder tree.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Finline-citation\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Inline Citation\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A source in the sentence that opens on hover.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fmessage\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Message\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">One turn. The person's message, and the agent's reply with its actions.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fmodel-selector\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Model Selector\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">Two menus. One picks the model the agent runs, the other picks how hard it thinks.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fplan\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Plan\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">The steps the agent plans to take, and how far it has got.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fprompt-input\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Prompt Input\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A message field with attachments and a send button.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fqueue\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Queue\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">The agent's todo list, split into what is left and what is done.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Freasoning\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Reasoning\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">The agent's thinking as it streams.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fsources\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Sources\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">The links the agent used for a reply.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fstack-trace\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Stack Trace\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A failed tool call and its stack frames.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fsubagent\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Subagent\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A subagent run, with its tool calls and result.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fsuggestion\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Suggestion\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A short prompt you can send to the agent in one click.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Ftask\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Task\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">The steps the agent takes, as it takes them.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Fterminal\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Terminal\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A command the agent runs, with its output as it streams.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Ftest-results\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Test Results\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A test run by the agent, with its suites and failures.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n  \u003Clinked-card href=\"\u002Fdocs\u002Fai-elements\u002Ftool\" class=\"items-start gap-1 p-6 text-sm sm:p-6\">\n    \u003Cdiv class=\"font-medium\">Tool\u003C\u002Fdiv>\n    \u003Cdiv class=\"leading-relaxed text-muted-foreground\">A tool call the agent makes, from input to output.\u003C\u002Fdiv>\n  \u003C\u002Flinked-card>\n\u003C\u002Fdiv>\n\n## Migrating from AI Elements Vue\n\nIf you used AI Elements Vue from [ai-elements-vue.com](https:\u002F\u002Fwww.ai-elements-vue.com), here is what changes.\n\n### Existing projects\n\nYou do not need to migrate. When you installed components from ai-elements-vue.com, the code was copied into your project. It is yours, and it keeps working as is.\n\nTo move a wrapper onto shadcn-vue components, use the prompt in the **Migrating from AI Elements Vue** section of its pattern page. Paste it into your coding agent. It rebuilds the folder in `components\u002Fai-elements` on Trace, Code Block and the other shadcn-vue components, and keeps every export and its props, so the code that uses it does not change.\n\nFor example, the [Queue](\u002Fdocs\u002Fai-elements\u002Fqueue#migrating-from-ai-elements-vue) prompt rebuilds `queue\u002F` on Trace, and the [Inline Citation](\u002Fdocs\u002Fai-elements\u002Finline-citation#migrating-from-ai-elements-vue) prompt rebuilds `inline-citation\u002F` on Hover Card.\n\n### What replaces each element\n\nEach folder from AI Elements Vue, and the shadcn-vue pattern or component that replaces it.\n\n| AI Elements Vue     | shadcn-vue                                             |\n| ------------------- | ------------------------------------------------------ |\n| `agent\u002F`            | [Subagent](\u002Fdocs\u002Fai-elements\u002Fsubagent)                 |\n| `attachments\u002F`      | [Attachment](\u002Fdocs\u002Fcomponents\u002Fattachment)              |\n| `chain-of-thought\u002F` | [Chain of Thought](\u002Fdocs\u002Fai-elements\u002Fchain-of-thought) |\n| `checkpoint\u002F`       | [Checkpoint](\u002Fdocs\u002Fai-elements\u002Fcheckpoint)             |\n| `code-block\u002F`       | [Code Block](\u002Fdocs\u002Fcomponents\u002Fcode-block)              |\n| `commit\u002F`           | [Trace](\u002Fdocs\u002Fcomponents\u002Ftrace#commit)                 |\n| `confirmation\u002F`     | [Confirmation](\u002Fdocs\u002Fai-elements\u002Fconfirmation)         |\n| `context\u002F`          | [Context](\u002Fdocs\u002Fai-elements\u002Fcontext)                   |\n| `conversation\u002F`     | [Chat](\u002Fdocs\u002Fai-elements\u002Fchat)                         |\n| `file-tree\u002F`        | [File Tree](\u002Fdocs\u002Fai-elements\u002Ffile-tree)               |\n| `inline-citation\u002F`  | [Inline Citation](\u002Fdocs\u002Fai-elements\u002Finline-citation)   |\n| `loader\u002F`           | [Spinner](\u002Fdocs\u002Fcomponents\u002Fspinner)                    |\n| `message\u002F`          | [Message](\u002Fdocs\u002Fai-elements\u002Fmessage)                   |\n| `model-selector\u002F`   | [Model Selector](\u002Fdocs\u002Fai-elements\u002Fmodel-selector)     |\n| `plan\u002F`             | [Plan](\u002Fdocs\u002Fai-elements\u002Fplan)                         |\n| `prompt-input\u002F`     | [Prompt Input](\u002Fdocs\u002Fai-elements\u002Fprompt-input)         |\n| `queue\u002F`            | [Queue](\u002Fdocs\u002Fai-elements\u002Fqueue)                       |\n| `reasoning\u002F`        | [Reasoning](\u002Fdocs\u002Fai-elements\u002Freasoning)               |\n| `shimmer\u002F`          | [shimmer](\u002Fdocs\u002Futilities\u002Fshimmer)                     |\n| `sources\u002F`          | [Sources](\u002Fdocs\u002Fai-elements\u002Fsources)                   |\n| `stack-trace\u002F`      | [Stack Trace](\u002Fdocs\u002Fai-elements\u002Fstack-trace)           |\n| `suggestion\u002F`       | [Suggestion](\u002Fdocs\u002Fai-elements\u002Fsuggestion)             |\n| `task\u002F`             | [Task](\u002Fdocs\u002Fai-elements\u002Ftask)                         |\n| `terminal\u002F`         | [Terminal](\u002Fdocs\u002Fai-elements\u002Fterminal)                 |\n| `test-results\u002F`     | [Test Results](\u002Fdocs\u002Fai-elements\u002Ftest-results)         |\n| `tool\u002F`             | [Tool](\u002Fdocs\u002Fai-elements\u002Ftool)                         |\n\n### Elements without a replacement\n\nWe did not rebuild these elements. Few projects use them, and each one is also a small composition you can build from components shadcn-vue already has, listed below.\n\nYour copy keeps working. If you still need one of these, [open an issue](https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Fissues\u002Fnew\u002Fchoose) and we will help you build it.\n\n| AI Elements Vue                                                                  | Build it with                                                                                                              |\n| -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |\n| `artifact\u002F`                                                                      | [Card](\u002Fdocs\u002Fcomponents\u002Fcard), [Button](\u002Fdocs\u002Fcomponents\u002Fbutton) and [Tooltip](\u002Fdocs\u002Fcomponents\u002Ftooltip)                   |\n| `audio-player\u002F`                                                                  | An `audio` element, with [Button Group](\u002Fdocs\u002Fcomponents\u002Fbutton-group) and [Slider](\u002Fdocs\u002Fcomponents\u002Fslider)               |\n| `canvas\u002F`, `connection\u002F`, `controls\u002F`, `edge\u002F`, `node\u002F`, `panel\u002F` and `toolbar\u002F` | [Vue Flow](https:\u002F\u002Fvueflow.dev), with [Card](\u002Fdocs\u002Fcomponents\u002Fcard) and [Button Group](\u002Fdocs\u002Fcomponents\u002Fbutton-group)      |\n| `environment-variables\u002F`                                                         | [Item](\u002Fdocs\u002Fcomponents\u002Fitem), [Badge](\u002Fdocs\u002Fcomponents\u002Fbadge) and [Switch](\u002Fdocs\u002Fcomponents\u002Fswitch)                       |\n| `image\u002F`                                                                         | An `img` element                                                                                                           |\n| `mic-selector\u002F` and `voice-selector\u002F`                                            | [Combobox](\u002Fdocs\u002Fcomponents\u002Fcombobox)                                                                                      |\n| `open-in-chat\u002F`                                                                  | [Dropdown Menu](\u002Fdocs\u002Fcomponents\u002Fdropdown-menu)                                                                            |\n| `package-info\u002F`                                                                  | [Item](\u002Fdocs\u002Fcomponents\u002Fitem) and [Badge](\u002Fdocs\u002Fcomponents\u002Fbadge)                                                          |\n| `persona\u002F`                                                                       | A [Rive](https:\u002F\u002Frive.app) animation                                                                                       |\n| `sandbox\u002F`                                                                       | [Trace](\u002Fdocs\u002Fcomponents\u002Ftrace), [Tabs](\u002Fdocs\u002Fcomponents\u002Ftabs) and [Code Block](\u002Fdocs\u002Fcomponents\u002Fcode-block)               |\n| `schema-display\u002F`                                                                | [Collapsible](\u002Fdocs\u002Fcomponents\u002Fcollapsible), [Badge](\u002Fdocs\u002Fcomponents\u002Fbadge) and [Code Block](\u002Fdocs\u002Fcomponents\u002Fcode-block) |\n| `snippet\u002F`                                                                       | [Input Group](\u002Fdocs\u002Fcomponents\u002Finput-group)                                                                                |\n| `speech-input\u002F`                                                                  | [Button](\u002Fdocs\u002Fcomponents\u002Fbutton) and [Spinner](\u002Fdocs\u002Fcomponents\u002Fspinner), with the Web Speech API                         |\n| `transcription\u002F`                                                                 | A [Button](\u002Fdocs\u002Fcomponents\u002Fbutton) for each segment, to seek to it                                                        |\n\n### New projects\n\nBuild from shadcn-vue components instead.\n\n:::steps\n  ::step\n  Add the components\n  ::\n\n  ```bash\n  npx shadcn-vue@latest add trace code-block\n  ```\n\n  ::step\n  Copy a pattern\n  ::\n\n  Open a pattern above and copy its code into your project. Each page lists any other components it needs.\n\n  Or ask your coding agent to do it:\n\n  ```txt\n  Add the Reasoning pattern from https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fai-elements\u002Freasoning to my chat.\n  ```\n:::\n\n::callout\n**Missing an element?** [Open an issue](https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Fissues\u002Fnew\u002Fchoose) and tell us what you need.\n::\n",{"title":351,"description":1562},"yLzrh8wYbp-UsFQA0AxYbdfuR_ZqlSIooBf5g3efvm0",[1570,1571],{"title":549,"path":550,"stem":551,"children":-1},{"title":356,"path":357,"stem":358,"children":-1},1792076479587]