[{"data":1,"prerenderedAt":673},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fgetting-started\u002Fintroduction":187,"docs-surround:\u002Fdocs\u002Fgetting-started\u002Fintroduction":670},[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":10,"badge":13,"body":189,"description":664,"extension":665,"meta":666,"navigation":667,"path":11,"seo":668,"status":13,"stem":12,"__hash__":669},"docs\u002Fdocs\u002F1.getting-started\u002F1.introduction.md",{"type":190,"value":191,"toc":655},"minimark",[192,213,221,245,250,253,277,288,291,306,310,398,401,408,645,648,652],[193,194,195,196,203,204,208,209,212],"p",{},"goopUI copies shadcn's components one by one. Each one wraps the same ",[197,198,202],"a",{"href":199,"rel":200},"https:\u002F\u002Freka-ui.com",[201],"nofollow","reka-ui"," primitive that shadcn-vue uses and keeps the same API: cva variants, ",[205,206,207],"code",{},"class"," passthrough, and ",[205,210,211],{},"asChild",". The difference is a layer of goo behind it. Hover a button and drips swell off its bottom edge, neck, and fall. Press it and it squishes, then springs back.",[214,215,217],"preview",{"caption":216},"GoopButton, running on @goopui\u002Fcore",[218,219],"demo-buttons",{"set":220},"variants",[222,223,225],"callout",{"type":224},"alpha",[193,226,227,228,232,233,236,237,241,242,244],{},"goopUI is working toward ",[229,230,231],"strong",{},"v0.1",". The engine (",[205,234,235],{},"@goopui\u002Fcore","), the Vue components, and the Nuxt module are in alpha, and APIs may still change. Pages marked ",[238,239,240],"em",{},"new · experimental"," are the newest components, whose props are the most likely to move. Pages marked ",[238,243,125],{}," describe planned behavior.",[246,247,249],"h2",{"id":248},"how-it-works","How it works",[193,251,252],{},"Every component has two layers:",[254,255,256,263],"ul",{},[257,258,259,262],"li",{},[229,260,261],{},"Your content."," The real button, label, and icon. Nothing filters it, so text stays crisp and accessible.",[257,264,265,268,269,272,273,276],{},[229,266,267],{},"The goo layer."," An ",[205,270,271],{},"aria-hidden"," element under the content with ",[205,274,275],{},"pointer-events: none",", holding the body shape and drip circles. An SVG goo filter (blur, then a sharp alpha threshold) melts the circles into one liquid shape.",[193,278,279,280,283,284,287],{},"The goo layer is padded outside the element, so drips can hang and fall without changing your layout. Its color is the variant's background token (",[205,281,282],{},"--primary",", ",[205,285,286],{},"--destructive",", and so on).",[193,289,290],{},"It also reacts to how you move: fast entries splash goo out the far side, clicks send a shockwave, and the goo carries your pointer's momentum. An optional oil finish adds an iridescent sheen.",[193,292,293,294,297,298,301,302,305],{},"Drips run on a small spring and gravity integrator. Every instance on the page shares one ",[205,295,296],{},"requestAnimationFrame"," loop, and that loop stops when nothing is moving. It draws with an SVG filter by default (only ",[205,299,300],{},"transform"," and ",[205,303,304],{},"opacity"," change per frame) or with a shared WebGL canvas.",[246,307,309],{"id":308},"packages","Packages",[311,312,313,329],"table",{},[314,315,316],"thead",{},[317,318,319,323,326],"tr",{},[320,321,322],"th",{},"Package",[320,324,325],{},"What it is",[320,327,328],{},"Status",[330,331,332,345,357,373,386],"tbody",{},[317,333,334,339,342],{},[335,336,337],"td",{},[205,338,235],{},[335,340,341],{},"The engine. Plain TypeScript and DOM, with no framework and no dependencies. SSR-safe.",[335,343,344],{},"Alpha",[317,346,347,352,355],{},[335,348,349],{},[205,350,351],{},"@goopui\u002Fvue",[335,353,354],{},"Vue components (SFCs) on top of core and reka-ui. Works in plain Vue\u002FVite.",[335,356,344],{},[317,358,359,364,371],{},[335,360,361],{},[205,362,363],{},"@goopui\u002Fnuxt",[335,365,366,367,370],{},"Nuxt module that auto-imports the Vue components and injects ",[205,368,369],{},"goop.css",".",[335,372,344],{},[317,374,375,380,383],{},[335,376,377],{},[205,378,379],{},"@goopui\u002Freact",[335,381,382],{},"React components",[335,384,385],{},"Later",[317,387,388,393,396],{},[335,389,390],{},[205,391,392],{},"@goopui\u002Fsvelte",[335,394,395],{},"Svelte components",[335,397,385],{},[246,399,32],{"id":400},"components",[193,402,403,404,407],{},"Each component keeps the shadcn-vue API and adds goo props. Every effect can be switched off on its own, and ",[205,405,406],{},":goo=\"false\""," renders the plain shadcn component.",[311,409,410,420],{},[314,411,412],{},[317,413,414,417],{},[320,415,416],{},"Component",[320,418,419],{},"What the goo does",[330,421,422,431,440,452,461,470,480,491,500,509,520,529,539,548,557,568,579,591,602,613,622,633],{},[317,423,424,428],{},[335,425,426],{},[197,427,37],{"href":38},[335,429,430],{},"Drips off the edge, squishes on press, pulls taffy.",[317,432,433,437],{},[335,434,435],{},[197,436,41],{"href":42},[335,438,439],{},"Metaballs chase each other around a circle, merging and splitting.",[317,441,442,446],{},[335,443,444],{},[197,445,45],{"href":46},[335,447,448,449],{},"Pressing floods the button with goo. A toggle group's goo flows between items. ",[238,450,451],{},"New.",[317,453,454,458],{},[335,455,456],{},[197,457,50],{"href":51},[335,459,460],{},"The thumb is a goo blob that throws itself across the track.",[317,462,463,467],{},[335,464,465],{},[197,466,54],{"href":55},[335,468,469],{},"Checking drops goo into the box.",[317,471,472,477],{},[335,473,474],{},[197,475,476],{"href":59},"Radio group",[335,478,479],{},"The selected dot jumps to the next radio over a goo bridge.",[317,481,482,486],{},[335,483,484],{},[197,485,62],{"href":63},[335,487,488,489],{},"Focus runs goo around the field's border. Textarea too. ",[238,490,451],{},[317,492,493,497],{},[335,494,495],{},[197,496,66],{"href":67},[335,498,499],{},"A liquid fill and a jelly thumb.",[317,501,502,506],{},[335,503,504],{},[197,505,70],{"href":71},[335,507,508],{},"A liquid fill with a wobbling front and drips.",[317,510,511,515],{},[335,512,513],{},[197,514,74],{"href":75},[335,516,517,518],{},"The list blooms out of the selected item, and the check mark plops in. ",[238,519,451],{},[317,521,522,526],{},[335,523,524],{},[197,525,78],{"href":79},[335,527,528],{},"Blooms open from a droplet and splashes all around.",[317,530,531,536],{},[335,532,533],{},[197,534,535],{"href":83},"Dropdown menu",[335,537,538],{},"Blooms open, and the highlight slides between items.",[317,540,541,545],{},[335,542,543],{},[197,544,86],{"href":87},[335,546,547],{},"Blooms open, quick and small.",[317,549,550,554],{},[335,551,552],{},[197,553,90],{"href":91},[335,555,556],{},"The active indicator slides between tabs with momentum.",[317,558,559,563],{},[335,560,561],{},[197,562,94],{"href":95},[335,564,565,566],{},"The trigger row floods with goo and the content opens on a jelly spring. Collapsible too. ",[238,567,451],{},[317,569,570,574],{},[335,571,572],{},[197,573,98],{"href":99},[335,575,576,577],{},"The panel blooms in the middle of the screen, with an opt-in goo overlay. ",[238,578,451],{},[317,580,581,586],{},[335,582,583],{},[197,584,585],{"href":103},"Alert dialog",[335,587,588,589],{},"The dialog's bloom, calmer. ",[238,590,451],{},[317,592,593,597],{},[335,594,595],{},[197,596,106],{"href":107},[335,598,599,600],{},"Blooms out of the screen edge. ",[238,601,451],{},[317,603,604,608],{},[335,605,606],{},[197,607,110],{"href":111},[335,609,610,611],{},"A draggable drawer whose edge lags, sloshes, and splashes. ",[238,612,451],{},[317,614,615,619],{},[335,616,617],{},[197,618,114],{"href":115},[335,620,621],{},"Toasts drop in, merge when stacked, and drip away.",[317,623,624,628],{},[335,625,626],{},[197,627,118],{"href":119},[335,629,630,631],{},"A band of bubbly goo sweeps across the page on navigation. ",[238,632,451],{},[317,634,635,639],{},[335,636,637],{},[197,638,122],{"href":123},[335,640,641,642],{},"Ambient goo for backgrounds. ",[238,643,644],{},"Soon.",[193,646,647],{},"Blob comes last. It's also the performance stress test that decides whether a canvas renderer is needed.",[246,649,651],{"id":650},"browser-support","Browser support",[193,653,654],{},"The last two versions of Chrome, Edge, Firefox, Safari, and iOS Safari. It has to feel good in Safari. If a filter is too slow there, that component falls back to static goo.",{"title":656,"searchDepth":657,"depth":657,"links":658},"",3,[659,661,662,663],{"id":248,"depth":660,"text":249},2,{"id":308,"depth":660,"text":309},{"id":400,"depth":660,"text":32},{"id":650,"depth":660,"text":651},"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.","md",{},true,{"title":10,"description":664},"mInp1Ew5LahEaHE2J26JkDGHnWeKj2SaQ5rtyqaX8YY",[13,671],{"title":15,"path":16,"stem":17,"description":672,"children":-1},"Add goopUI to a Nuxt app with the module, or to any Vue 3 app with the package and its stylesheet.",1793670386290]