[{"data":1,"prerenderedAt":768},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Fframeworks":10,"docs-sidebar":707,"i-lucide:file-text":764,"i-lucide:arrow-left":766},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",{"id":11,"title":12,"body":13,"description":699,"extension":700,"group":701,"groupOrder":80,"meta":702,"navTitle":12,"navigation":124,"order":140,"path":703,"seo":704,"stem":705,"__hash__":706},"docs\u002Fdocs\u002Fframeworks.md","React & Vue",{"type":14,"value":15,"toc":693},"minimark",[16,20,62,67,101,186,201,205,224,499,533,537,545,573,608,612,623,658,689],[17,18,12],"h1",{"id":19},"react-vue",[21,22,23,24,28,29,32,33,37,38,41,42,45,46,49,50,53,54,61],"p",{},"The core is framework-agnostic custom elements — they work in any framework as-is. But ",[25,26,27],"code",{},"@webmcpui\u002Freact"," and ",[25,30,31],{},"@webmcpui\u002Fvue"," give you ",[34,35,36],"strong",{},"idiomatic, typed"," components: real props, ",[25,39,40],{},"ref","s \u002F ",[25,43,44],{},"v-model",", and ",[25,47,48],{},"on*"," \u002F ",[25,51,52],{},"@event"," handlers. They're thin wrappers — the WebMCP exposure, form association, and accessibility all live once in ",[55,56,58],"a",{"href":57},"\u002Fdocs",[25,59,60],{},"@webmcpui\u002Fcore",", so there's no second implementation to drift.",[63,64,66],"h2",{"id":65},"react","React",[68,69,74],"pre",{"className":70,"code":71,"language":72,"meta":73,"style":73},"language-bash shiki shiki-themes github-light-default ayu-dark","pnpm add @webmcpui\u002Freact @webmcpui\u002Fcore react react-dom\n","bash","",[25,75,76],{"__ignoreMap":73},[77,78,81,85,89,92,95,98],"span",{"class":79,"line":80},"line",1,[77,82,84],{"class":83},"sBDEj","pnpm",[77,86,88],{"class":87},"sxLuP"," add",[77,90,91],{"class":87}," @webmcpui\u002Freact",[77,93,94],{"class":87}," @webmcpui\u002Fcore",[77,96,97],{"class":87}," react",[77,99,100],{"class":87}," react-dom\n",[68,102,106],{"className":103,"code":104,"language":105,"meta":73,"style":73},"language-tsx shiki shiki-themes github-light-default ayu-dark","import { Button, Input, Dialog } from '@webmcpui\u002Freact';\nimport '@webmcpui\u002Ftokens\u002Fcss';\n\nfunction Example() {\n  const [email, setEmail] = React.useState('');\n  return (\n    \u003C>\n      \u003CInput label=\"Email\" type=\"email\" value={email}\n             onInput={(e) => setEmail(e.currentTarget.value)} expose \u002F>\n      \u003CButton variant=\"primary\" onClick={save}>Save\u003C\u002FButton>\n    \u003C\u002F>\n  );\n}\n","tsx",[25,107,108,113,119,126,132,138,144,150,156,162,168,174,180],{"__ignoreMap":73},[77,109,110],{"class":79,"line":80},[77,111,112],{},"import { Button, Input, Dialog } from '@webmcpui\u002Freact';\n",[77,114,116],{"class":79,"line":115},2,[77,117,118],{},"import '@webmcpui\u002Ftokens\u002Fcss';\n",[77,120,122],{"class":79,"line":121},3,[77,123,125],{"emptyLinePlaceholder":124},true,"\n",[77,127,129],{"class":79,"line":128},4,[77,130,131],{},"function Example() {\n",[77,133,135],{"class":79,"line":134},5,[77,136,137],{},"  const [email, setEmail] = React.useState('');\n",[77,139,141],{"class":79,"line":140},6,[77,142,143],{},"  return (\n",[77,145,147],{"class":79,"line":146},7,[77,148,149],{},"    \u003C>\n",[77,151,153],{"class":79,"line":152},8,[77,154,155],{},"      \u003CInput label=\"Email\" type=\"email\" value={email}\n",[77,157,159],{"class":79,"line":158},9,[77,160,161],{},"             onInput={(e) => setEmail(e.currentTarget.value)} expose \u002F>\n",[77,163,165],{"class":79,"line":164},10,[77,166,167],{},"      \u003CButton variant=\"primary\" onClick={save}>Save\u003C\u002FButton>\n",[77,169,171],{"class":79,"line":170},11,[77,172,173],{},"    \u003C\u002F>\n",[77,175,177],{"class":79,"line":176},12,[77,178,179],{},"  );\n",[77,181,183],{"class":79,"line":182},13,[77,184,185],{},"}\n",[21,187,188,189,193,194,196,197,200],{},"Props mirror the ",[55,190,192],{"href":191},"\u002Fdocs\u002Felements\u002Finput","element attributes",", camelCased. Imperative handles come through the ",[25,195,40],{}," (e.g. ",[25,198,199],{},"dialogRef.current.show()",").",[63,202,204],{"id":203},"vue","Vue",[68,206,208],{"className":70,"code":207,"language":72,"meta":73,"style":73},"pnpm add @webmcpui\u002Fvue @webmcpui\u002Fcore vue\n",[25,209,210],{"__ignoreMap":73},[77,211,212,214,216,219,221],{"class":79,"line":80},[77,213,84],{"class":83},[77,215,88],{"class":87},[77,217,218],{"class":87}," @webmcpui\u002Fvue",[77,220,94],{"class":87},[77,222,223],{"class":87}," vue\n",[68,225,228],{"className":226,"code":227,"language":203,"meta":73,"style":73},"language-vue shiki shiki-themes github-light-default ayu-dark","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Button, Input, Dialog } from '@webmcpui\u002Fvue';\nimport '@webmcpui\u002Ftokens\u002Fcss';\n\nconst email = ref('');\nconst open = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CInput v-model=\"email\" label=\"Email\" type=\"email\" expose \u002F>\n  \u003CButton variant=\"primary\" @click=\"open = true\">Book\u003C\u002FButton>\n  \u003CDialog v-model:open=\"open\" label=\"Confirm\">…\u003C\u002FDialog>\n\u003C\u002Ftemplate>\n",[25,229,230,257,276,301,310,314,342,363,372,376,385,422,457,490],{"__ignoreMap":73},[77,231,232,236,240,244,247,251,254],{"class":79,"line":80},[77,233,235],{"class":234},"sqV5G","\u003C",[77,237,239],{"class":238},"sfBZl","script",[77,241,243],{"class":242},"sI192"," setup",[77,245,246],{"class":242}," lang",[77,248,250],{"class":249},"siQKT","=",[77,252,253],{"class":87},"\"ts\"",[77,255,256],{"class":234},">\n",[77,258,259,263,267,270,273],{"class":79,"line":115},[77,260,262],{"class":261},"s7jPt","import",[77,264,266],{"class":265},"sBz_o"," { ref } ",[77,268,269],{"class":261},"from",[77,271,272],{"class":87}," 'vue'",[77,274,275],{"class":249},";\n",[77,277,278,280,283,286,289,291,294,296,299],{"class":79,"line":121},[77,279,262],{"class":261},[77,281,282],{"class":265}," { Button",[77,284,285],{"class":249},",",[77,287,288],{"class":265}," Input",[77,290,285],{"class":249},[77,292,293],{"class":265}," Dialog } ",[77,295,269],{"class":261},[77,297,298],{"class":87}," '@webmcpui\u002Fvue'",[77,300,275],{"class":249},[77,302,303,305,308],{"class":79,"line":128},[77,304,262],{"class":261},[77,306,307],{"class":87}," '@webmcpui\u002Ftokens\u002Fcss'",[77,309,275],{"class":249},[77,311,312],{"class":79,"line":134},[77,313,125],{"emptyLinePlaceholder":124},[77,315,316,319,323,327,331,334,337,340],{"class":79,"line":140},[77,317,318],{"class":261},"const",[77,320,322],{"class":321},"sgp7R"," email",[77,324,326],{"class":325},"snFdW"," =",[77,328,330],{"class":329},"s2DMw"," ref",[77,332,333],{"class":265},"(",[77,335,336],{"class":87},"''",[77,338,339],{"class":265},")",[77,341,275],{"class":249},[77,343,344,346,349,351,353,355,359,361],{"class":79,"line":146},[77,345,318],{"class":261},[77,347,348],{"class":321}," open",[77,350,326],{"class":325},[77,352,330],{"class":329},[77,354,333],{"class":265},[77,356,358],{"class":357},"sQY3k","false",[77,360,339],{"class":265},[77,362,275],{"class":249},[77,364,365,368,370],{"class":79,"line":152},[77,366,367],{"class":234},"\u003C\u002F",[77,369,239],{"class":238},[77,371,256],{"class":234},[77,373,374],{"class":79,"line":158},[77,375,125],{"emptyLinePlaceholder":124},[77,377,378,380,383],{"class":79,"line":164},[77,379,235],{"class":234},[77,381,382],{"class":238},"template",[77,384,256],{"class":234},[77,386,387,390,393,396,398,401,404,406,409,412,414,416,419],{"class":79,"line":170},[77,388,389],{"class":234},"  \u003C",[77,391,392],{"class":238},"Input",[77,394,395],{"class":242}," v-model",[77,397,250],{"class":249},[77,399,400],{"class":87},"\"email\"",[77,402,403],{"class":242}," label",[77,405,250],{"class":249},[77,407,408],{"class":87},"\"Email\"",[77,410,411],{"class":242}," type",[77,413,250],{"class":249},[77,415,400],{"class":87},[77,417,418],{"class":242}," expose",[77,420,421],{"class":234}," \u002F>\n",[77,423,424,426,429,432,434,437,440,442,445,448,451,453,455],{"class":79,"line":176},[77,425,389],{"class":234},[77,427,428],{"class":238},"Button",[77,430,431],{"class":242}," variant",[77,433,250],{"class":249},[77,435,436],{"class":87},"\"primary\"",[77,438,439],{"class":242}," @click",[77,441,250],{"class":249},[77,443,444],{"class":87},"\"open = true\"",[77,446,447],{"class":234},">",[77,449,450],{"class":265},"Book",[77,452,367],{"class":234},[77,454,428],{"class":238},[77,456,256],{"class":234},[77,458,459,461,464,467,469,472,474,476,479,481,484,486,488],{"class":79,"line":182},[77,460,389],{"class":234},[77,462,463],{"class":238},"Dialog",[77,465,466],{"class":242}," v-model:open",[77,468,250],{"class":249},[77,470,471],{"class":87},"\"open\"",[77,473,403],{"class":242},[77,475,250],{"class":249},[77,477,478],{"class":87},"\"Confirm\"",[77,480,447],{"class":234},[77,482,483],{"class":265},"…",[77,485,367],{"class":234},[77,487,463],{"class":238},[77,489,256],{"class":234},[77,491,493,495,497],{"class":79,"line":492},14,[77,494,367],{"class":234},[77,496,382],{"class":238},[77,498,256],{"class":234},[21,500,501,503,504,506,507,510,511,513,514,510,517,520,521,528,529,532],{},[25,502,44],{}," binds an ",[25,505,392],{},"'s value; ",[25,508,509],{},"v-model:open"," a ",[25,512,463],{},"; ",[25,515,516],{},"v-model:active",[25,518,519],{},"Tabs",". ",[34,522,523,524,527],{},"No ",[25,525,526],{},"isCustomElement"," config needed"," — the ",[25,530,531],{},"wmcp-*"," tag only lives inside each component's render function, never your templates.",[63,534,536],{"id":535},"unstyled-bring-your-own-styles","Unstyled (bring your own styles)",[21,538,539,540,544],{},"Every layer is headless underneath: the elements render with neutral inline fallbacks and only ",[541,542,543],"em",{},"look"," shadcn-aligned when you load the theme. So:",[546,547,548,559],"ul",{},[549,550,551,554,555,558],"li",{},[34,552,553],{},"Themed"," — ",[25,556,557],{},"import '@webmcpui\u002Ftokens\u002Fcss'"," once at your app root.",[549,560,561,564,565,568,569,572],{},[34,562,563],{},"Unstyled"," — don't import it. Then style the elements yourself via the CSS custom properties (e.g. ",[25,566,567],{},"--button-primary-bg",") or the ",[25,570,571],{},"::part()"," selectors each element exposes:",[68,574,578],{"className":575,"code":576,"language":577,"meta":73,"style":73},"language-css shiki shiki-themes github-light-default ayu-dark","wmcp-button::part(control) { border-radius: 9999px; }\n","css",[25,579,580],{"__ignoreMap":73},[77,581,582,586,589,593,596,599,602,605],{"class":79,"line":80},[77,583,585],{"class":584},"s2cXC","wmcp-button",[77,587,588],{"class":265},"::part(control) { ",[77,590,592],{"class":591},"srNlZ","border-radius",[77,594,595],{"class":249},":",[77,597,598],{"class":357}," 9999",[77,600,601],{"class":261},"px",[77,603,604],{"class":249},";",[77,606,607],{"class":265}," }\n",[63,609,611],{"id":610},"server-rendering-nextjs-nuxt","Server rendering (Next.js, Nuxt, …)",[21,613,614,615,618,619,622],{},"These are ",[34,616,617],{},"client-rendered custom elements"," — importing them evaluates ",[25,620,621],{},"class extends HTMLElement",", which has no meaning on the server. Load them client-side:",[68,624,626],{"className":103,"code":625,"language":105,"meta":73,"style":73},"\u002F\u002F Next.js App Router\n'use client';\nimport dynamic from 'next\u002Fdynamic';\nconst Button = dynamic(() => import('@webmcpui\u002Freact').then((m) => m.Button), {\n  ssr: false,\n});\n",[25,627,628,633,638,643,648,653],{"__ignoreMap":73},[77,629,630],{"class":79,"line":80},[77,631,632],{},"\u002F\u002F Next.js App Router\n",[77,634,635],{"class":79,"line":115},[77,636,637],{},"'use client';\n",[77,639,640],{"class":79,"line":121},[77,641,642],{},"import dynamic from 'next\u002Fdynamic';\n",[77,644,645],{"class":79,"line":128},[77,646,647],{},"const Button = dynamic(() => import('@webmcpui\u002Freact').then((m) => m.Button), {\n",[77,649,650],{"class":79,"line":134},[77,651,652],{},"  ssr: false,\n",[77,654,655],{"class":79,"line":140},[77,656,657],{},"});\n",[21,659,660,663,664,667,668,676,677,680,681,684,685,688],{},[25,661,662],{},"'use client'"," alone isn't enough — Next still renders client components on the server, so use ",[25,665,666],{},"ssr: false"," (or add a DOM shim like ",[55,669,673],{"href":670,"rel":671},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@lit-labs\u002Fssr-dom-shim",[672],"nofollow",[25,674,675],{},"@lit-labs\u002Fssr-dom-shim"," to render them server-side). In ",[34,678,679],{},"Nuxt",", register\u002Fuse them in a ",[25,682,683],{},".client"," plugin or wrap usage in ",[25,686,687],{},"\u003CClientOnly>",". The elements upgrade and hydrate on the client normally.",[690,691,692],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBDEj, html code.shiki .sBDEj{--shiki-default:#953800;--shiki-dark:#59C2FF}html pre.shiki code .sxLuP, html code.shiki .sxLuP{--shiki-default:#0A3069;--shiki-dark:#AAD94C}html pre.shiki code .sqV5G, html code.shiki .sqV5G{--shiki-default:#1F2328;--shiki-dark:#39BAE680}html pre.shiki code .sfBZl, html code.shiki .sfBZl{--shiki-default:#116329;--shiki-dark:#39BAE6}html pre.shiki code .sI192, html code.shiki .sI192{--shiki-default:#0550AE;--shiki-dark:#FFB454}html pre.shiki code .siQKT, html code.shiki .siQKT{--shiki-default:#1F2328;--shiki-dark:#BFBDB6B3}html pre.shiki code .s7jPt, html code.shiki .s7jPt{--shiki-default:#CF222E;--shiki-dark:#FF8F40}html pre.shiki code .sBz_o, html code.shiki .sBz_o{--shiki-default:#1F2328;--shiki-dark:#BFBDB6}html pre.shiki code .sgp7R, html code.shiki .sgp7R{--shiki-default:#0550AE;--shiki-dark:#BFBDB6}html pre.shiki code .snFdW, html code.shiki .snFdW{--shiki-default:#CF222E;--shiki-dark:#F29668}html pre.shiki code .s2DMw, html code.shiki .s2DMw{--shiki-default:#8250DF;--shiki-dark:#FFB454}html pre.shiki code .sQY3k, html code.shiki .sQY3k{--shiki-default:#0550AE;--shiki-dark:#D2A6FF}html pre.shiki code .s2cXC, html code.shiki .s2cXC{--shiki-default:#116329;--shiki-dark:#59C2FF}html pre.shiki code .srNlZ, html code.shiki .srNlZ{--shiki-default:#0550AE;--shiki-dark:#39BAE6}",{"title":73,"searchDepth":115,"depth":115,"links":694},[695,696,697,698],{"id":65,"depth":115,"text":66},{"id":203,"depth":115,"text":204},{"id":535,"depth":115,"text":536},{"id":610,"depth":115,"text":611},"Idiomatic, typed React and Vue components that wrap the core custom elements — with unstyled and SSR guidance.","md","Getting started",{},"\u002Fdocs\u002Fframeworks",{"title":12,"description":699},"docs\u002Fframeworks","84hLsmzDAxZTYcP2itzIhh0-O3xuFeYOBSuzUgGey8k",[708,712,717,720,722,726,730,734,738,741,745,749,750,752,755,758,761],{"path":709,"title":710,"navTitle":428,"group":711,"order":80,"groupOrder":121},"\u002Fdocs\u002Felements\u002Fbutton","\u003Cwmcp-button>","Interaction",{"path":713,"title":714,"navTitle":715,"group":716,"order":128,"groupOrder":115},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":718,"title":719,"navTitle":463,"group":711,"order":115,"groupOrder":121},"\u002Fdocs\u002Felements\u002Fdialog","\u003Cwmcp-dialog>",{"path":191,"title":721,"navTitle":392,"group":716,"order":80,"groupOrder":115},"\u003Cwmcp-input>",{"path":723,"title":724,"navTitle":725,"group":711,"order":121,"groupOrder":121},"\u002Fdocs\u002Felements\u002Fmenu","\u003Cwmcp-menu>","Menu",{"path":727,"title":728,"navTitle":729,"group":711,"order":134,"groupOrder":121},"\u002Fdocs\u002Felements\u002Fpopover","\u003Cwmcp-popover>","Popover",{"path":731,"title":732,"navTitle":733,"group":716,"order":134,"groupOrder":115},"\u002Fdocs\u002Felements\u002Fradio","\u003Cwmcp-radio-group>","Radio group",{"path":735,"title":736,"navTitle":737,"group":716,"order":121,"groupOrder":115},"\u002Fdocs\u002Felements\u002Fselect","\u003Cwmcp-select>","Select",{"path":739,"title":740,"navTitle":519,"group":711,"order":128,"groupOrder":121},"\u002Fdocs\u002Felements\u002Ftabs","\u003Cwmcp-tabs>",{"path":742,"title":743,"navTitle":744,"group":716,"order":115,"groupOrder":115},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":746,"title":747,"navTitle":748,"group":711,"order":140,"groupOrder":121},"\u002Fdocs\u002Felements\u002Ftoast","\u003Cwmcp-toast>","Toast",{"path":703,"title":12,"navTitle":12,"group":701,"order":140,"groupOrder":80},{"path":57,"title":751,"navTitle":751,"group":701,"order":80,"groupOrder":80},"Introduction",{"path":753,"title":754,"navTitle":754,"group":701,"order":115,"groupOrder":80},"\u002Fdocs\u002Finstallation","Installation",{"path":756,"title":757,"navTitle":757,"group":701,"order":134,"groupOrder":80},"\u002Fdocs\u002Ftesting","Testing",{"path":759,"title":760,"navTitle":760,"group":701,"order":121,"groupOrder":80},"\u002Fdocs\u002Fvalidation","Validation",{"path":762,"title":763,"navTitle":763,"group":701,"order":128,"groupOrder":80},"\u002Fdocs\u002Fwebmcp","WebMCP exposure",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":765},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":767},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",1782971919735]