[{"data":1,"prerenderedAt":1164},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fgetting-started\u002Finstallation":187,"docs-surround:\u002Fdocs\u002Fgetting-started\u002Finstallation":1159},[4,31,178],{"title":5,"path":6,"stem":7,"children":8,"page":30},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[9,14,18,22,26],{"title":10,"path":11,"stem":12,"status":13,"badge":13},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,{"title":15,"path":16,"stem":17,"status":13,"badge":13},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21,"status":13,"badge":13},"Theming","\u002Fdocs\u002Fgetting-started\u002Ftheming","docs\u002F1.getting-started\u002F3.theming",{"title":23,"path":24,"stem":25,"status":13,"badge":13},"Accessibility & reduced motion","\u002Fdocs\u002Fgetting-started\u002Faccessibility","docs\u002F1.getting-started\u002F4.accessibility",{"title":27,"path":28,"stem":29,"status":13,"badge":13},"Sound","\u002Fdocs\u002Fgetting-started\u002Fsound","docs\u002F1.getting-started\u002F5.sound",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[36,40,44,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,126,130,134,138,142,146,150,154,158,162,166,170,174],{"title":37,"path":38,"stem":39,"status":13,"badge":13},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002F01.button",{"title":41,"path":42,"stem":43,"status":13,"badge":13},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002F2.components\u002F02.spinner",{"title":45,"path":46,"stem":47,"status":13,"badge":48},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002F2.components\u002F03.toggle","experimental",{"title":50,"path":51,"stem":52,"status":13,"badge":13},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002F04.switch",{"title":54,"path":55,"stem":56,"status":13,"badge":13},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002F05.checkbox",{"title":58,"path":59,"stem":60,"status":13,"badge":13},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002F06.radio-group",{"title":62,"path":63,"stem":64,"status":13,"badge":48},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002F07.input",{"title":66,"path":67,"stem":68,"status":13,"badge":13},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002F08.slider",{"title":70,"path":71,"stem":72,"status":13,"badge":13},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002F09.progress",{"title":74,"path":75,"stem":76,"status":13,"badge":48},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002F10.select",{"title":78,"path":79,"stem":80,"status":13,"badge":13},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002F11.popover",{"title":82,"path":83,"stem":84,"status":13,"badge":13},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002F12.dropdown-menu",{"title":86,"path":87,"stem":88,"status":13,"badge":13},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002F13.tooltip",{"title":90,"path":91,"stem":92,"status":13,"badge":13},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002F14.tabs",{"title":94,"path":95,"stem":96,"status":13,"badge":48},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002F15.accordion",{"title":98,"path":99,"stem":100,"status":13,"badge":48},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002F2.components\u002F16.dialog",{"title":102,"path":103,"stem":104,"status":13,"badge":48},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002F2.components\u002F17.alert-dialog",{"title":106,"path":107,"stem":108,"status":13,"badge":48},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002F2.components\u002F18.sheet",{"title":110,"path":111,"stem":112,"status":13,"badge":48},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002F19.drawer",{"title":114,"path":115,"stem":116,"status":13,"badge":13},"Toaster","\u002Fdocs\u002Fcomponents\u002Ftoaster","docs\u002F2.components\u002F20.toaster",{"title":118,"path":119,"stem":120,"status":13,"badge":48},"Page transition","\u002Fdocs\u002Fcomponents\u002Fpage-transition","docs\u002F2.components\u002F21.page-transition",{"title":122,"path":123,"stem":124,"status":125,"badge":13},"Blob","\u002Fdocs\u002Fcomponents\u002Fblob","docs\u002F2.components\u002F22.blob","soon",{"title":127,"path":128,"stem":129,"status":13,"badge":48},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002F2.components\u002F23.command",{"title":131,"path":132,"stem":133,"status":13,"badge":48},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002F2.components\u002F24.combobox",{"title":135,"path":136,"stem":137,"status":13,"badge":48},"NumberField","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002F2.components\u002F25.number-field",{"title":139,"path":140,"stem":141,"status":13,"badge":48},"InputOTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002F2.components\u002F26.input-otp",{"title":143,"path":144,"stem":145,"status":13,"badge":48},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002F2.components\u002F27.hover-card",{"title":147,"path":148,"stem":149,"status":13,"badge":48},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002F28.context-menu",{"title":151,"path":152,"stem":153,"status":13,"badge":48},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002F29.skeleton",{"title":155,"path":156,"stem":157,"status":13,"badge":48},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002F30.badge",{"title":159,"path":160,"stem":161,"status":13,"badge":48},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002F31.card",{"title":163,"path":164,"stem":165,"status":13,"badge":48},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002F32.avatar",{"title":167,"path":168,"stem":169,"status":13,"badge":48},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002F33.separator",{"title":171,"path":172,"stem":173,"status":13,"badge":48},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002F2.components\u002F34.label",{"title":175,"path":176,"stem":177,"status":13,"badge":48},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002F35.sidebar",{"title":179,"path":180,"stem":181,"children":182,"page":30},"Core","\u002Fdocs\u002Fcore","docs\u002F3.core",[183],{"title":184,"path":185,"stem":186,"status":13,"badge":13},"API reference","\u002Fdocs\u002Fcore\u002Fapi","docs\u002F3.core\u002F1.api",{"id":188,"title":15,"badge":13,"body":189,"description":1154,"extension":1155,"meta":1156,"navigation":925,"path":16,"seo":1157,"status":13,"stem":17,"__hash__":1158},"docs\u002Fdocs\u002F1.getting-started\u002F2.installation.md",{"type":190,"value":191,"toc":1143},"minimark",[192,200,205,273,277,280,305,308,350,361,428,435,473,478,485,707,748,779,783,799,813,816,819,833,843,870,873,958,961,1037,1044,1061,1073,1087,1091,1098,1113,1116,1127,1131,1139],[193,194,196],"callout",{"type":195},"alpha",[197,198,199],"p",{},"goopUI is an early alpha: component APIs and goo props may change between releases. Pin the version, and read the changelog when you upgrade.",[201,202,204],"h2",{"id":203},"requirements","Requirements",[206,207,208,220,231,260],"ul",{},[209,210,211,215,216,219],"li",{},[212,213,214],"strong",{},"Vue 3.5+"," (or ",[212,217,218],{},"Nuxt 3.13+ \u002F Nuxt 4",").",[209,221,222,225,226,230],{},[212,223,224],{},"Tailwind CSS v4",", already set up in your app (for example with ",[227,228,229],"code",{},"@tailwindcss\u002Fvite","). The components are styled with Tailwind utilities, like shadcn's.",[209,232,233,236,237,240,241,240,244,247,248,251,252,259],{},[212,234,235],{},"The shadcn CSS variables"," (",[227,238,239],{},"--primary",", ",[227,242,243],{},"--popover",[227,245,246],{},"--radius",", and so on). If you already use shadcn-vue, you have them. If not, run ",[227,249,250],{},"npx shadcn-vue@latest init"," or copy the variables from the ",[253,254,258],"a",{"href":255,"rel":256},"https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Ftheming",[257],"nofollow","shadcn-vue theming docs",".",[209,261,262,265,266,236,269,272],{},[212,263,264],{},"reka-ui"," comes with ",[227,267,268],{},"@goopui\u002Fvue",[227,270,271],{},"^2.11","), so you don't install it yourself. If you also use shadcn-vue, they can share one copy.",[201,274,276],{"id":275},"nuxt","Nuxt",[197,278,279],{},"Install the module:",[281,282,287],"pre",{"className":283,"code":284,"language":285,"meta":286,"style":286},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[227,288,289],{"__ignoreMap":286},[290,291,294,298,302],"span",{"class":292,"line":293},"line",1,[290,295,297],{"class":296},"sScJk","pnpm",[290,299,301],{"class":300},"sZZnC"," add",[290,303,304],{"class":300}," @goopui\u002Fnuxt\n",[197,306,307],{},"Register it:",[281,309,314],{"className":310,"code":311,"filename":312,"language":313,"meta":286,"style":286},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[227,315,316,332,344],{"__ignoreMap":286},[290,317,318,322,325,328],{"class":292,"line":293},[290,319,321],{"class":320},"szBVR","export",[290,323,324],{"class":320}," default",[290,326,327],{"class":296}," defineNuxtConfig",[290,329,331],{"class":330},"sVt8B","({\n",[290,333,335,338,341],{"class":292,"line":334},2,[290,336,337],{"class":330},"  modules: [",[290,339,340],{"class":300},"'@goopui\u002Fnuxt'",[290,342,343],{"class":330},"],\n",[290,345,347],{"class":292,"line":346},3,[290,348,349],{"class":330},"})\n",[197,351,352,353,356,357,360],{},"The module auto-imports every component and injects ",[227,354,355],{},"goop.css",". Components get the ",[227,358,359],{},"Goop"," prefix by default, so they sit next to shadcn's without clashing:",[281,362,367],{"className":363,"code":364,"filename":365,"language":366,"meta":286,"style":286},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003CButton variant=\"outline\">Plain\u003C\u002FButton>\n  \u003CGoopButton>Gooey\u003C\u002FGoopButton>\n\u003C\u002Ftemplate>\n","app.vue","vue",[227,368,369,381,404,418],{"__ignoreMap":286},[290,370,371,374,378],{"class":292,"line":293},[290,372,373],{"class":330},"\u003C",[290,375,377],{"class":376},"s9eBZ","template",[290,379,380],{"class":330},">\n",[290,382,383,386,388,391,394,397,400,402],{"class":292,"line":334},[290,384,385],{"class":330},"  \u003C",[290,387,37],{"class":376},[290,389,390],{"class":296}," variant",[290,392,393],{"class":330},"=",[290,395,396],{"class":300},"\"outline\"",[290,398,399],{"class":330},">Plain\u003C\u002F",[290,401,37],{"class":376},[290,403,380],{"class":330},[290,405,406,408,411,414,416],{"class":292,"line":346},[290,407,385],{"class":330},[290,409,410],{"class":376},"GoopButton",[290,412,413],{"class":330},">Gooey\u003C\u002F",[290,415,410],{"class":376},[290,417,380],{"class":330},[290,419,421,424,426],{"class":292,"line":420},4,[290,422,423],{"class":330},"\u003C\u002F",[290,425,377],{"class":376},[290,427,380],{"class":330},[197,429,430,431,434],{},"Change it with the module's ",[227,432,433],{},"prefix"," option:",[281,436,438],{"className":310,"code":437,"filename":312,"language":313,"meta":286,"style":286},"export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n  goop: { prefix: 'Goo' },\n})\n",[227,439,440,450,458,469],{"__ignoreMap":286},[290,441,442,444,446,448],{"class":292,"line":293},[290,443,321],{"class":320},[290,445,324],{"class":320},[290,447,327],{"class":296},[290,449,331],{"class":330},[290,451,452,454,456],{"class":292,"line":334},[290,453,337],{"class":330},[290,455,340],{"class":300},[290,457,343],{"class":330},[290,459,460,463,466],{"class":292,"line":346},[290,461,462],{"class":330},"  goop: { prefix: ",[290,464,465],{"class":300},"'Goo'",[290,467,468],{"class":330}," },\n",[290,470,471],{"class":292,"line":420},[290,472,349],{"class":330},[474,475,477],"h3",{"id":476},"module-options","Module options",[197,479,480,481,484],{},"All options go under the ",[227,482,483],{},"goop"," key and are optional:",[486,487,488,507],"table",{},[489,490,491],"thead",{},[492,493,494,498,501,504],"tr",{},[495,496,497],"th",{},"Option",[495,499,500],{},"Type",[495,502,503],{},"Default",[495,505,506],{},"What it does",[508,509,510,539,566,598,621,641,661,681],"tbody",{},[492,511,512,517,522,527],{},[513,514,515],"td",{},[227,516,433],{},[513,518,519],{},[227,520,521],{},"string",[513,523,524],{},[227,525,526],{},"'Goop'",[513,528,529,530,533,534,240,536,538],{},"Prefix for the auto-imported components. ",[227,531,532],{},"''"," registers ",[227,535,37],{},[227,537,66],{},", and so on.",[492,540,541,546,551,556],{},[513,542,543],{},[227,544,545],{},"css",[513,547,548],{},[227,549,550],{},"boolean",[513,552,553],{},[227,554,555],{},"true",[513,557,558,559,562,563,259],{},"Add ",[227,560,561],{},"@goopui\u002Fvue\u002Fgoop.css"," to ",[227,564,565],{},"nuxt.options.css",[492,567,568,573,577,581],{},[513,569,570],{},[227,571,572],{},"tailwindSource",[513,574,575],{},[227,576,550],{},[513,578,579],{},[227,580,555],{},[513,582,583,584,587,588,590,591,594,595,597],{},"Add an ",[227,585,586],{},"@source"," for ",[227,589,268],{}," to every Tailwind v4 entry CSS (any file that imports ",[227,592,593],{},"tailwindcss","), so Tailwind generates the classes the components use. Turn it off if you import ",[227,596,355],{}," from your Tailwind entry yourself.",[492,599,600,605,610,615],{},[513,601,602],{},[227,603,604],{},"preset",[513,606,607],{},[227,608,609],{},"'subtle' | 'playful' | 'wild'",[513,611,612],{},[227,613,614],{},"'playful'",[513,616,617,618,259],{},"App-wide feel. See ",[253,619,19],{"href":620},"\u002Fdocs\u002Fgetting-started\u002Ftheming#presets",[492,622,623,628,633,638],{},[513,624,625],{},[227,626,627],{},"renderer",[513,629,630],{},[227,631,632],{},"'svg' | 'canvas'",[513,634,635],{},[227,636,637],{},"'svg'",[513,639,640],{},"App-wide renderer.",[492,642,643,648,653,658],{},[513,644,645],{},[227,646,647],{},"finish",[513,649,650],{},[227,651,652],{},"'solid' | 'oil'",[513,654,655],{},[227,656,657],{},"'solid'",[513,659,660],{},"App-wide surface finish.",[492,662,663,668,673,678],{},[513,664,665],{},[227,666,667],{},"splash",[513,669,670],{},[227,671,672],{},"'near' | 'escape' | 'off'",[513,674,675],{},[227,676,677],{},"'near'",[513,679,680],{},"Where splash and shockwave particles go.",[492,682,683,688,693,698],{},[513,684,685],{},[227,686,687],{},"reducedMotion",[513,689,690],{},[227,691,692],{},"boolean | 'auto'",[513,694,695],{},[227,696,697],{},"'auto'",[513,699,700,702,703,706],{},[227,701,555],{}," forces reduced motion on. ",[227,704,705],{},"false"," ignores the OS setting.",[281,708,710],{"className":310,"code":709,"filename":312,"language":313,"meta":286,"style":286},"export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n  goop: { prefix: 'Goo', preset: 'subtle' },\n})\n",[227,711,712,722,730,744],{"__ignoreMap":286},[290,713,714,716,718,720],{"class":292,"line":293},[290,715,321],{"class":320},[290,717,324],{"class":320},[290,719,327],{"class":296},[290,721,331],{"class":330},[290,723,724,726,728],{"class":292,"line":334},[290,725,337],{"class":330},[290,727,340],{"class":300},[290,729,343],{"class":330},[290,731,732,734,736,739,742],{"class":292,"line":346},[290,733,462],{"class":330},[290,735,465],{"class":300},[290,737,738],{"class":330},", preset: ",[290,740,741],{"class":300},"'subtle'",[290,743,468],{"class":330},[290,745,746],{"class":292,"line":420},[290,747,349],{"class":330},[197,749,750,240,752,240,754,240,756,758,759,761,762,764,765,767,768,240,770,758,772,774,775,764,777,259],{},[227,751,604],{},[227,753,627],{},[227,755,647],{},[227,757,667],{},", and ",[227,760,687],{}," are defaults. A prop on a component beats them. Not every component reads every default. ",[227,763,647],{}," and ",[227,766,667],{}," only matter to components built on the full drip engine, like Button. The smaller ones (Switch, Slider, Progress, ...) read ",[227,769,604],{},[227,771,627],{},[227,773,687],{},", and the Toaster reads ",[227,776,604],{},[227,778,687],{},[474,780,782],{"id":781},"the-toaster","The Toaster",[197,784,785,788,789,794,795,798],{},[227,786,787],{},"GoopToaster"," wraps ",[253,790,793],{"href":791,"rel":792},"https:\u002F\u002Fvue-sonner.vercel.app",[257],"vue-sonner",", which is a peer dependency. Install it and add its stylesheet only if you use the Toaster. See the ",[253,796,114],{"href":797},"\u002Fdocs\u002Fcomponents\u002Ftoaster#installation"," page.",[281,800,802],{"className":283,"code":801,"language":285,"meta":286,"style":286},"pnpm add vue-sonner\n",[227,803,804],{"__ignoreMap":286},[290,805,806,808,810],{"class":292,"line":293},[290,807,297],{"class":296},[290,809,301],{"class":300},[290,811,812],{"class":300}," vue-sonner\n",[201,814,815],{"id":366},"Vue",[197,817,818],{},"Install the package:",[281,820,822],{"className":283,"code":821,"language":285,"meta":286,"style":286},"pnpm add @goopui\u002Fvue\n",[227,823,824],{"__ignoreMap":286},[290,825,826,828,830],{"class":292,"line":293},[290,827,297],{"class":296},[290,829,301],{"class":300},[290,831,832],{"class":300}," @goopui\u002Fvue\n",[197,834,835,836,839,840,842],{},"Import the stylesheet after Tailwind. It holds the ",[227,837,838],{},"--goop-*"," tokens, the keyframes, and an ",[227,841,586],{}," so Tailwind picks up the classes the components use:",[281,844,848],{"className":845,"code":846,"filename":847,"language":545,"meta":286,"style":286},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css",[227,849,850,861],{"__ignoreMap":286},[290,851,852,855,858],{"class":292,"line":293},[290,853,854],{"class":320},"@import",[290,856,857],{"class":300}," \"tailwindcss\"",[290,859,860],{"class":330},";\n",[290,862,863,865,868],{"class":292,"line":334},[290,864,854],{"class":320},[290,866,867],{"class":300}," \"@goopui\u002Fvue\u002Fgoop.css\"",[290,869,860],{"class":330},[197,871,872],{},"Then import components where you use them:",[281,874,877],{"className":363,"code":875,"filename":876,"language":366,"meta":286,"style":286},"\u003Cscript setup lang=\"ts\">\nimport { GoopButton } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopButton>Gooey\u003C\u002FGoopButton>\n\u003C\u002Ftemplate>\n","App.vue",[227,878,879,899,913,921,927,936,949],{"__ignoreMap":286},[290,880,881,883,886,889,892,894,897],{"class":292,"line":293},[290,882,373],{"class":330},[290,884,885],{"class":376},"script",[290,887,888],{"class":296}," setup",[290,890,891],{"class":296}," lang",[290,893,393],{"class":330},[290,895,896],{"class":300},"\"ts\"",[290,898,380],{"class":330},[290,900,901,904,907,910],{"class":292,"line":334},[290,902,903],{"class":320},"import",[290,905,906],{"class":330}," { GoopButton } ",[290,908,909],{"class":320},"from",[290,911,912],{"class":300}," '@goopui\u002Fvue'\n",[290,914,915,917,919],{"class":292,"line":346},[290,916,423],{"class":330},[290,918,885],{"class":376},[290,920,380],{"class":330},[290,922,923],{"class":292,"line":420},[290,924,926],{"emptyLinePlaceholder":925},true,"\n",[290,928,930,932,934],{"class":292,"line":929},5,[290,931,373],{"class":330},[290,933,377],{"class":376},[290,935,380],{"class":330},[290,937,939,941,943,945,947],{"class":292,"line":938},6,[290,940,385],{"class":330},[290,942,410],{"class":376},[290,944,413],{"class":330},[290,946,410],{"class":376},[290,948,380],{"class":330},[290,950,952,954,956],{"class":292,"line":951},7,[290,953,423],{"class":330},[290,955,377],{"class":376},[290,957,380],{"class":330},[197,959,960],{},"To set app-wide defaults, install the plugin. They take the same values as the Nuxt module options above:",[281,962,965],{"className":310,"code":963,"filename":964,"language":313,"meta":286,"style":286},"import { createApp } from 'vue'\nimport { GoopPlugin } from '@goopui\u002Fvue'\nimport App from '.\u002FApp.vue'\n\ncreateApp(App).use(GoopPlugin, { preset: 'subtle' }).mount('#app')\n","main.ts",[227,966,967,979,990,1002,1006],{"__ignoreMap":286},[290,968,969,971,974,976],{"class":292,"line":293},[290,970,903],{"class":320},[290,972,973],{"class":330}," { createApp } ",[290,975,909],{"class":320},[290,977,978],{"class":300}," 'vue'\n",[290,980,981,983,986,988],{"class":292,"line":334},[290,982,903],{"class":320},[290,984,985],{"class":330}," { GoopPlugin } ",[290,987,909],{"class":320},[290,989,912],{"class":300},[290,991,992,994,997,999],{"class":292,"line":346},[290,993,903],{"class":320},[290,995,996],{"class":330}," App ",[290,998,909],{"class":320},[290,1000,1001],{"class":300}," '.\u002FApp.vue'\n",[290,1003,1004],{"class":292,"line":420},[290,1005,926],{"emptyLinePlaceholder":925},[290,1007,1008,1011,1014,1017,1020,1022,1025,1028,1031,1034],{"class":292,"line":929},[290,1009,1010],{"class":296},"createApp",[290,1012,1013],{"class":330},"(App).",[290,1015,1016],{"class":296},"use",[290,1018,1019],{"class":330},"(GoopPlugin, { preset: ",[290,1021,741],{"class":300},[290,1023,1024],{"class":330}," }).",[290,1026,1027],{"class":296},"mount",[290,1029,1030],{"class":330},"(",[290,1032,1033],{"class":300},"'#app'",[290,1035,1036],{"class":330},")\n",[197,1038,1039,1040,1043],{},"To set them for one part of the tree, call ",[227,1041,1042],{},"provideGoopConfig({ preset: 'wild' })"," in a parent component.",[197,1045,1046,1048,1049,764,1051,1054,1055,1057,1058,1060],{},[227,1047,268],{}," depends on ",[227,1050,264],{},[227,1052,1053],{},"@goopui\u002Fcore",", so you don't install those yourself. ",[227,1056,366],{}," is a peer dependency, and so is ",[227,1059,793],{}," if you use the Toaster:",[281,1062,1063],{"className":283,"code":801,"language":285,"meta":286,"style":286},[227,1064,1065],{"__ignoreMap":286},[290,1066,1067,1069,1071],{"class":292,"line":293},[290,1068,297],{"class":296},[290,1070,301],{"class":300},[290,1072,812],{"class":300},[281,1074,1076],{"className":845,"code":1075,"filename":847,"language":545,"meta":286,"style":286},"@import \"vue-sonner\u002Fstyle.css\";\n",[227,1077,1078],{"__ignoreMap":286},[290,1079,1080,1082,1085],{"class":292,"line":293},[290,1081,854],{"class":320},[290,1083,1084],{"class":300}," \"vue-sonner\u002Fstyle.css\"",[290,1086,860],{"class":330},[201,1088,1090],{"id":1089},"versions","Versions",[197,1092,1093,1094,1097],{},"All ",[227,1095,1096],{},"@goopui\u002F*"," packages are released together with the same version number. Keep them in step:",[281,1099,1101],{"className":283,"code":1100,"language":285,"meta":286,"style":286},"pnpm up \"@goopui\u002F*\"\n",[227,1102,1103],{"__ignoreMap":286},[290,1104,1105,1107,1110],{"class":292,"line":293},[290,1106,297],{"class":296},[290,1108,1109],{"class":300}," up",[290,1111,1112],{"class":300}," \"@goopui\u002F*\"\n",[201,1114,32],{"id":1115},"components",[197,1117,1118,1119,1121,1122,1126],{},"Components are named with the ",[227,1120,359],{}," prefix and keep the shadcn-vue API. The full list is on the ",[253,1123,1125],{"href":1124},"\u002Fdocs\u002Fgetting-started\u002Fintroduction#components","introduction"," page. Each component has its own page with a live demo and its props.",[201,1128,1130],{"id":1129},"react-and-svelte","React and Svelte",[197,1132,1133,1134,1138],{},"They're coming after the Vue API settles. Until then you can use ",[253,1135,1136],{"href":185},[227,1137,1053],{}," directly. It works on any element.",[1140,1141,1142],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":286,"searchDepth":346,"depth":346,"links":1144},[1145,1146,1150,1151,1152,1153],{"id":203,"depth":334,"text":204},{"id":275,"depth":334,"text":276,"children":1147},[1148,1149],{"id":476,"depth":346,"text":477},{"id":781,"depth":346,"text":782},{"id":366,"depth":334,"text":815},{"id":1089,"depth":334,"text":1090},{"id":1115,"depth":334,"text":32},{"id":1129,"depth":334,"text":1130},"Add goopUI to a Nuxt app with the module, or to any Vue 3 app with the package and its stylesheet.","md",{},{"title":15,"description":1154},"YHFR6MzCuqEqLvOS4ei2ZQGzW9VFNp8uLN7tiHI7YH8",[1160,1162],{"title":10,"path":11,"stem":12,"description":1161,"children":-1},"goopUI is the shadcn catalog made gooey. Same components, same API, built on reka-ui, with a small physics engine that makes them swell, squish, and drip.",{"title":19,"path":20,"stem":21,"description":1163,"children":-1},"Colors come from your shadcn tokens. The goo is tuned with a preset and --goop-* CSS variables, globally or per component.",1793670387374]