[{"data":1,"prerenderedAt":1197},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fgetting-started\u002Ftheming":187,"docs-surround:\u002Fdocs\u002Fgetting-started\u002Ftheming":1192},[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":19,"badge":13,"body":189,"description":1187,"extension":1188,"meta":1189,"navigation":870,"path":20,"seo":1190,"status":13,"stem":21,"__hash__":1191},"docs\u002Fdocs\u002F1.getting-started\u002F3.theming.md",{"type":190,"value":191,"toc":1171},"minimark",[192,197,210,228,313,317,332,363,370,373,377,392,654,659,665,689,693,715,718,732,791,795,802,805,816,820,823,826,830,833,976,993,997,1015,1019,1022,1115,1122,1126,1129,1157,1161,1164,1167],[193,194,196],"h2",{"id":195},"colors","Colors",[198,199,200,201,205,206,209],"p",{},"goopUI uses the shadcn CSS variables you already have. A component's goo is painted in its variant's background token. GoopButton's default variant drips ",[202,203,204],"code",{},"--primary",", the destructive one drips ",[202,207,208],{},"--destructive",", and so on. Change those tokens and the goo follows, in light and dark mode.",[198,211,212,213,216,217,220,221,227],{},"Under the hood, the engine paints with ",[202,214,215],{},"--goop-color"," (falling back to ",[202,218,219],{},"currentColor","). The components set it for you. If you use ",[222,223,224],"a",{"href":185},[202,225,226],{},"@goopui\u002Fcore"," directly, set it yourself:",[229,230,235],"pre",{"className":231,"code":232,"language":233,"meta":234,"style":234},"language-css shiki shiki-themes github-light github-dark",".my-button {\n  --goop-color: var(--primary);\n  color: var(--primary-foreground);\n  background: transparent; \u002F* the goo body paints the fill *\u002F\n}\n","css","",[202,236,237,250,272,289,307],{"__ignoreMap":234},[238,239,242,246],"span",{"class":240,"line":241},"line",1,[238,243,245],{"class":244},"sScJk",".my-button",[238,247,249],{"class":248},"sVt8B"," {\n",[238,251,253,257,260,264,267,269],{"class":240,"line":252},2,[238,254,256],{"class":255},"s4XuR","  --goop-color",[238,258,259],{"class":248},": ",[238,261,263],{"class":262},"sj4cs","var",[238,265,266],{"class":248},"(",[238,268,204],{"class":255},[238,270,271],{"class":248},");\n",[238,273,275,278,280,282,284,287],{"class":240,"line":274},3,[238,276,277],{"class":262},"  color",[238,279,259],{"class":248},[238,281,263],{"class":262},[238,283,266],{"class":248},[238,285,286],{"class":255},"--primary-foreground",[238,288,271],{"class":248},[238,290,292,295,297,300,303],{"class":240,"line":291},4,[238,293,294],{"class":262},"  background",[238,296,259],{"class":248},[238,298,299],{"class":262},"transparent",[238,301,302],{"class":248},"; ",[238,304,306],{"class":305},"sJ8bj","\u002F* the goo body paints the fill *\u002F\n",[238,308,310],{"class":240,"line":309},5,[238,311,312],{"class":248},"}\n",[193,314,316],{"id":315},"presets","Presets",[198,318,319,320,323,324,327,328,331],{},"Start from a preset, then adjust single variables. ",[202,321,322],{},"playful"," is the default. ",[202,325,326],{},"subtle"," is calm enough for a dense dashboard: one slow drip, small reactions, no flying goo. ",[202,329,330],{},"wild"," is for hero sections: bigger and faster, with splashes that escape across the page, gloss, puddles, and long taffy.",[229,333,335],{"className":231,"code":334,"language":233,"meta":234,"style":234},".dashboard { --goop-preset: subtle; }\n.hero { --goop-preset: wild; }\n",[202,336,337,351],{"__ignoreMap":234},[238,338,339,342,345,348],{"class":240,"line":241},[238,340,341],{"class":244},".dashboard",[238,343,344],{"class":248}," { ",[238,346,347],{"class":255},"--goop-preset",[238,349,350],{"class":248},": subtle; }\n",[238,352,353,356,358,360],{"class":240,"line":252},[238,354,355],{"class":244},".hero",[238,357,344],{"class":248},[238,359,347],{"class":255},[238,361,362],{"class":248},": wild; }\n",[198,364,365,366,369],{},"In JS it's ",[202,367,368],{},"preset: 'wild'",". A preset only changes defaults, so anything you set explicitly still wins. This is everything the presets change:",[371,372],"goop-presets-table",{},[193,374,376],{"id":375},"features","Features",[198,378,379,380,383,384,387,388,391],{},"Every feature can be switched on or off by itself. A JS option takes ",[202,381,382],{},"true",", ",[202,385,386],{},"false",", or a strength; the CSS variable takes the strength, and ",[202,389,390],{},"0"," turns it off.",[393,394,395,414],"table",{},[396,397,398],"thead",{},[399,400,401,405,408,411],"tr",{},[402,403,404],"th",{},"Feature",[402,406,407],{},"Option",[402,409,410],{},"CSS variable",[402,412,413],{},"Default",[415,416,417,436,453,472,492,510,527,544,561,578,600,617,634],"tbody",{},[399,418,419,423,428,433],{},[420,421,422],"td",{},"Hover and tap drips",[420,424,425],{},[202,426,427],{},"drips",[420,429,430],{},[202,431,432],{},"--goop-drip-count",[420,434,435],{},"on",[399,437,438,441,446,451],{},[420,439,440],{},"Click shockwave",[420,442,443],{},[202,444,445],{},"shockwave",[420,447,448],{},[202,449,450],{},"--goop-shockwave",[420,452,435],{},[399,454,455,458,463,468],{},[420,456,457],{},"Fast hits",[420,459,460],{},[202,461,462],{},"hitEffect",[420,464,465],{},[202,466,467],{},"--goop-hit-effect",[420,469,470],{},[202,471,445],{},[399,473,474,477,482,487],{},[420,475,476],{},"Splashes reach",[420,478,479],{},[202,480,481],{},"splash",[420,483,484],{},[202,485,486],{},"--goop-splash",[420,488,489],{},[202,490,491],{},"near",[399,493,494,497,502,507],{},[420,495,496],{},"Wet gloss",[420,498,499],{},[202,500,501],{},"gloss",[420,503,504],{},[202,505,506],{},"--goop-gloss",[420,508,509],{},"off",[399,511,512,515,520,525],{},[420,513,514],{},"Taffy pull",[420,516,517],{},[202,518,519],{},"taffy",[420,521,522],{},[202,523,524],{},"--goop-taffy",[420,526,435],{},[399,528,529,532,537,542],{},[420,530,531],{},"Reach toward the pointer",[420,533,534],{},[202,535,536],{},"reach",[420,538,539],{},[202,540,541],{},"--goop-reach",[420,543,435],{},[399,545,546,549,554,559],{},[420,547,548],{},"Splash strands",[420,550,551],{},[202,552,553],{},"strands",[420,555,556],{},[202,557,558],{},"--goop-strands",[420,560,435],{},[399,562,563,566,571,576],{},[420,564,565],{},"Puddles",[420,567,568],{},[202,569,570],{},"puddles",[420,572,573],{},[202,574,575],{},"--goop-puddles",[420,577,509],{},[399,579,580,583,588,593],{},[420,581,582],{},"Label ride",[420,584,585],{},[202,586,587],{},"labelRide",[420,589,590],{},[202,591,592],{},"--goop-label-ride",[420,594,595,596,599],{},"on for ",[202,597,598],{},"[data-goop-label]"," content",[399,601,602,605,610,615],{},[420,603,604],{},"Keyboard squish",[420,606,607],{},[202,608,609],{},"keyboard",[420,611,612],{},[202,613,614],{},"--goop-keyboard",[420,616,435],{},[399,618,619,622,627,632],{},[420,620,621],{},"Idle breathing",[420,623,624],{},[202,625,626],{},"idle",[420,628,629],{},[202,630,631],{},"--goop-idle",[420,633,435],{},[399,635,636,639,644,649],{},[420,637,638],{},"Oil finish",[420,640,641],{},[202,642,643],{},"finish",[420,645,646],{},[202,647,648],{},"--goop-finish",[420,650,651],{},[202,652,653],{},"solid",[655,656,658],"h3",{"id":657},"hit-effects","Hit effects",[198,660,661,662,664],{},"A fast pointer hit is a hard entry, or a fast swipe across or out of the element. ",[202,663,467],{}," decides what it does:",[666,667,668,674,679],"ul",{},[669,670,671,673],"li",{},[202,672,445],{}," (default): the same effect as a click, aimed along the motion and scaled by speed.",[669,675,676,678],{},[202,677,481],{},": goo punches out of the far side.",[669,680,681,684,685,688],{},[202,682,683],{},"both",", or ",[202,686,687],{},"none",".",[655,690,692],{"id":691},"splash-reach","Splash reach",[198,694,695,697,698,700,701,704,705,707,708,712,713,688],{},[202,696,486],{}," decides where shockwave and splash particles go: ",[202,699,491],{}," keeps them within about 70px of the element, ",[202,702,703],{},"escape"," flies them across the page in one shared overlay, and ",[202,706,509],{}," has none. Click or swipe hard across the hero on the ",[222,709,711],{"href":710},"\u002F","home page"," to see ",[202,714,703],{},[655,716,638],{"id":717},"oil-finish",[198,719,720,723,724,727,728,731],{},[202,721,722],{},"--goop-finish: oil"," gives the goo a thin-film iridescent sheen, like oil on a puddle. It's light by default; raise ",[202,725,726],{},"--goop-oil-intensity"," for more. It uses the canvas renderer, and you can switch it on and off at runtime with ",[202,729,730],{},"update({ finish })",". Under reduced motion the sheen holds still.",[229,733,735],{"className":231,"code":734,"language":233,"meta":234,"style":234},".crude-oil {\n  --goop-color: oklch(0.17 0.01 60);\n  --goop-finish: oil;\n  --goop-oil-intensity: 0.6;\n}\n",[202,736,737,744,766,774,787],{"__ignoreMap":234},[238,738,739,742],{"class":240,"line":241},[238,740,741],{"class":244},".crude-oil",[238,743,249],{"class":248},[238,745,746,748,750,753,755,758,761,764],{"class":240,"line":252},[238,747,256],{"class":255},[238,749,259],{"class":248},[238,751,752],{"class":262},"oklch",[238,754,266],{"class":248},[238,756,757],{"class":262},"0.17",[238,759,760],{"class":262}," 0.01",[238,762,763],{"class":262}," 60",[238,765,271],{"class":248},[238,767,768,771],{"class":240,"line":274},[238,769,770],{"class":255},"  --goop-finish",[238,772,773],{"class":248},": oil;\n",[238,775,776,779,781,784],{"class":240,"line":291},[238,777,778],{"class":255},"  --goop-oil-intensity",[238,780,259],{"class":248},[238,782,783],{"class":262},"0.6",[238,785,786],{"class":248},";\n",[238,788,789],{"class":240,"line":309},[238,790,312],{"class":248},[193,792,794],{"id":793},"every-variable","Every variable",[198,796,797,798,801],{},"Each knob is a CSS custom property. The engine reads them from the element (so they inherit) when it mounts, and again whenever ",[202,799,800],{},"update()"," runs. This table comes straight from the engine's own metadata, so names, defaults, ranges, and descriptions always match:",[803,804],"goop-vars-table",{},[198,806,807,808,811,812,815],{},"Values are plain numbers: ",[202,809,810],{},"6"," and ",[202,813,814],{},"6px"," both read as 6. Anything out of range is clamped, so a typo can't break the simulation.",[193,817,819],{"id":818},"try-it","Try it",[198,821,822],{},"Pick a preset, flip features, and move sliders. Each slider sets a variable on the demo area, and every slider explains what it does. The CSS below the demo is what you'd paste into your stylesheet.",[824,825],"tuner-demo",{},[193,827,829],{"id":828},"scope","Scope",[198,831,832],{},"Variables cascade like any custom property, so you can scope them however you like:",[229,834,836],{"className":231,"code":835,"language":233,"meta":234,"style":234},"\u002F* Everywhere *\u002F\n:root {\n  --goop-thickness: 1.4;\n}\n\n\u002F* Thicker goo, splashing across the page, in one section *\u002F\n.hero {\n  --goop-preset: wild;\n  --goop-softness: 6;\n  --goop-drip-size: 9;\n}\n\n\u002F* One component, calmer *\u002F\n.settings .goop-button {\n  --goop-pointer-reaction: 0.4;\n  --goop-shockwave: 0;\n}\n",[202,837,838,843,850,862,866,872,878,885,894,906,919,924,929,935,946,959,971],{"__ignoreMap":234},[238,839,840],{"class":240,"line":241},[238,841,842],{"class":305},"\u002F* Everywhere *\u002F\n",[238,844,845,848],{"class":240,"line":252},[238,846,847],{"class":244},":root",[238,849,249],{"class":248},[238,851,852,855,857,860],{"class":240,"line":274},[238,853,854],{"class":255},"  --goop-thickness",[238,856,259],{"class":248},[238,858,859],{"class":262},"1.4",[238,861,786],{"class":248},[238,863,864],{"class":240,"line":291},[238,865,312],{"class":248},[238,867,868],{"class":240,"line":309},[238,869,871],{"emptyLinePlaceholder":870},true,"\n",[238,873,875],{"class":240,"line":874},6,[238,876,877],{"class":305},"\u002F* Thicker goo, splashing across the page, in one section *\u002F\n",[238,879,881,883],{"class":240,"line":880},7,[238,882,355],{"class":244},[238,884,249],{"class":248},[238,886,888,891],{"class":240,"line":887},8,[238,889,890],{"class":255},"  --goop-preset",[238,892,893],{"class":248},": wild;\n",[238,895,897,900,902,904],{"class":240,"line":896},9,[238,898,899],{"class":255},"  --goop-softness",[238,901,259],{"class":248},[238,903,810],{"class":262},[238,905,786],{"class":248},[238,907,909,912,914,917],{"class":240,"line":908},10,[238,910,911],{"class":255},"  --goop-drip-size",[238,913,259],{"class":248},[238,915,916],{"class":262},"9",[238,918,786],{"class":248},[238,920,922],{"class":240,"line":921},11,[238,923,312],{"class":248},[238,925,927],{"class":240,"line":926},12,[238,928,871],{"emptyLinePlaceholder":870},[238,930,932],{"class":240,"line":931},13,[238,933,934],{"class":305},"\u002F* One component, calmer *\u002F\n",[238,936,938,941,944],{"class":240,"line":937},14,[238,939,940],{"class":244},".settings",[238,942,943],{"class":244}," .goop-button",[238,945,249],{"class":248},[238,947,949,952,954,957],{"class":240,"line":948},15,[238,950,951],{"class":255},"  --goop-pointer-reaction",[238,953,259],{"class":248},[238,955,956],{"class":262},"0.4",[238,958,786],{"class":248},[238,960,962,965,967,969],{"class":240,"line":961},16,[238,963,964],{"class":255},"  --goop-shockwave",[238,966,259],{"class":248},[238,968,390],{"class":262},[238,970,786],{"class":248},[238,972,974],{"class":240,"line":973},17,[238,975,312],{"class":248},[198,977,978,979,982,983,383,986,989,990,688],{},"Every engine option is also a component prop, so for the common cases you don't need CSS at all. See the ",[222,980,37],{"href":981},"\u002Fdocs\u002Fcomponents\u002Fbutton#props"," page for the full list. The smaller components (Switch, Slider, Progress, Toaster, ...) take a short list of effect toggles, plus ",[202,984,985],{},"speed",[202,987,988],{},"preset",", and ",[202,991,992],{},"renderer",[193,994,996],{"id":995},"app-wide-defaults","App-wide defaults",[198,998,999,1000,1003,1004,684,1007,1010,1011,1014],{},"To set a preset or renderer for the whole app, use the ",[202,1001,1002],{},"goop"," options of ",[202,1005,1006],{},"@goopui\u002Fnuxt",[202,1008,1009],{},"app.use(GoopPlugin, { preset: 'subtle' })"," in plain Vue. See ",[222,1012,15],{"href":1013},"\u002Fdocs\u002Fgetting-started\u002Finstallation#module-options",". A prop on a component beats the app default.",[193,1016,1018],{"id":1017},"component-colors","Component colors",[198,1020,1021],{},"Components with a fill take their color from a shadcn token. Override it with a variable on the component or an ancestor:",[393,1023,1024,1036],{},[396,1025,1026],{},[399,1027,1028,1031,1034],{},[402,1029,1030],{},"Component",[402,1032,1033],{},"Variable",[402,1035,413],{},[415,1037,1038,1049,1062,1075,1090,1102],{},[399,1039,1040,1042,1046],{},[420,1041,37],{},[420,1043,1044],{},[202,1045,215],{},[420,1047,1048],{},"the variant's background",[399,1050,1051,1053,1058],{},[420,1052,66],{},[420,1054,1055],{},[202,1056,1057],{},"--goop-slider-color",[420,1059,1060],{},[202,1061,204],{},[399,1063,1064,1066,1071],{},[420,1065,70],{},[420,1067,1068],{},[202,1069,1070],{},"--goop-progress-color",[420,1072,1073],{},[202,1074,204],{},[399,1076,1077,1079,1087],{},[420,1078,50],{},[420,1080,1081,383,1084],{},[202,1082,1083],{},"--goop-switch-fill",[202,1085,1086],{},"--goop-switch-thumb",[420,1088,1089],{},"the checked track and the thumb",[399,1091,1092,1094,1099],{},[420,1093,54],{},[420,1095,1096],{},[202,1097,1098],{},"--goop-checkbox-fill",[420,1100,1101],{},"the checked fill",[399,1103,1104,1107,1112],{},[420,1105,1106],{},"Radio group",[420,1108,1109],{},[202,1110,1111],{},"--goop-radio-fill",[420,1113,1114],{},"the selected dot",[198,1116,1117,1118,1121],{},"Popovers, menus, tooltips, and the Toaster paint the surface's own background, so change the shadcn token (",[202,1119,1120],{},"--popover",") instead.",[193,1123,1125],{"id":1124},"precedence","Precedence",[198,1127,1128],{},"For each knob the engine uses the first one it finds:",[1130,1131,1132,1139,1146,1154],"ol",{},[669,1133,1134,1135,1138],{},"An option passed in JavaScript (",[202,1136,1137],{},"attachGoop(el, { softness: 6 })",").",[669,1140,1141,1142,1145],{},"The ",[202,1143,1144],{},"--goop-*"," variable on the element, which may be inherited.",[669,1147,1148,1149,1151,1152,1138],{},"The preset (",[202,1150,347],{}," or ",[202,1153,988],{},[669,1155,1156],{},"The built-in default.",[193,1158,1160],{"id":1159},"renamed-variables","Renamed variables",[198,1162,1163],{},"Some variables got clearer names. The old names still work as deprecated aliases (with a one-time warning in development), but new code should use the new ones:",[1165,1166],"goop-renames-table",{},[1168,1169,1170],"style",{},"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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"title":234,"searchDepth":274,"depth":274,"links":1172},[1173,1174,1175,1180,1181,1182,1183,1184,1185,1186],{"id":195,"depth":252,"text":196},{"id":315,"depth":252,"text":316},{"id":375,"depth":252,"text":376,"children":1176},[1177,1178,1179],{"id":657,"depth":274,"text":658},{"id":691,"depth":274,"text":692},{"id":717,"depth":274,"text":638},{"id":793,"depth":252,"text":794},{"id":818,"depth":252,"text":819},{"id":828,"depth":252,"text":829},{"id":995,"depth":252,"text":996},{"id":1017,"depth":252,"text":1018},{"id":1124,"depth":252,"text":1125},{"id":1159,"depth":252,"text":1160},"Colors come from your shadcn tokens. The goo is tuned with a preset and --goop-* CSS variables, globally or per component.","md",{},{"title":19,"description":1187},"d7xTb9Cx85J3MXbD5IjylW2nurt2OBa3shmxBk3rcIU",[1193,1195],{"title":15,"path":16,"stem":17,"description":1194,"children":-1},"Add goopUI to a Nuxt app with the module, or to any Vue 3 app with the package and its stylesheet.",{"title":23,"path":24,"stem":25,"description":1196,"children":-1},"The goo is decoration, so it stays out of the way of assistive tech. Reduced motion keeps the goo shape and turns the motion off.",1793670387384]