[{"data":1,"prerenderedAt":694},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fcard":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fcard":689},[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":159,"badge":48,"body":189,"description":684,"extension":685,"meta":686,"navigation":345,"path":160,"seo":687,"status":13,"stem":161,"__hash__":688},"docs\u002Fdocs\u002F2.components\u002F31.card.md",{"type":190,"value":191,"toc":677},"minimark",[192,200,220,245,249,264,268,574,578,599,607,618,625,629,632,661,665,673],[193,194,197],"playground",{"caption":195,"name":196},"Static by default. Switch Goo on, then move the pointer near an edge.","card",[198,199],"demo-static-set",{"set":196},[201,202,204],"callout",{"type":203},"alpha",[205,206,207,211,212,215,216,219],"p",{},[208,209,210],"code",{},"@goopui\u002Fvue"," and ",[208,213,214],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The cards on this page are the real ",[208,217,218],{},"GoopCard",", and the code below is exactly what you write.",[205,221,222,224,225,224,228,224,231,224,234,224,237,240,241,244],{},[208,223,218],{},", ",[208,226,227],{},"GoopCardHeader",[208,229,230],{},"GoopCardTitle",[208,232,233],{},"GoopCardDescription",[208,235,236],{},"GoopCardAction",[208,238,239],{},"GoopCardContent",", and ",[208,242,243],{},"GoopCardFooter"," are shadcn-vue's Card parts, with the same markup and classes. A card is static unless you turn the goo on.",[246,247,15],"h2",{"id":248},"installation",[205,250,251,252,254,255,257,258,263],{},"Install ",[208,253,214],{}," or ",[208,256,210],{}," as shown on the ",[259,260,262],"a",{"href":261},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports every Card part.",[246,265,267],{"id":266},"usage","Usage",[269,270,275],"pre",{"className":271,"code":272,"language":273,"meta":274,"style":274},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\nimport { GoopCard, GoopCardAction, GoopCardContent, GoopCardDescription, GoopCardFooter, GoopCardHeader, GoopCardTitle } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopCard class=\"max-w-sm\">\n    \u003CGoopCardHeader>\n      \u003CGoopCardTitle>Project Apollo\u003C\u002FGoopCardTitle>\n      \u003CGoopCardDescription>Three tasks due this week.\u003C\u002FGoopCardDescription>\n      \u003CGoopCardAction>\n        \u003CGoopBadge variant=\"outline\">Live\u003C\u002FGoopBadge>\n      \u003C\u002FGoopCardAction>\n    \u003C\u002FGoopCardHeader>\n    \u003CGoopCardContent>A plain card: no goo unless you ask for it.\u003C\u002FGoopCardContent>\n    \u003CGoopCardFooter class=\"gap-2\">\n      \u003CGoopButton size=\"sm\">Open\u003C\u002FGoopButton>\n      \u003CGoopButton size=\"sm\" variant=\"outline\">Later\u003C\u002FGoopButton>\n    \u003C\u002FGoopCardFooter>\n  \u003C\u002FGoopCard>\n\u003C\u002Ftemplate>\n","vue","",[208,276,277,307,314,330,340,347,357,375,385,400,414,423,447,457,467,481,497,520,546,555,565],{"__ignoreMap":274},[278,279,282,286,290,294,297,300,304],"span",{"class":280,"line":281},"line",1,[278,283,285],{"class":284},"sVt8B","\u003C",[278,287,289],{"class":288},"s9eBZ","script",[278,291,293],{"class":292},"sScJk"," setup",[278,295,296],{"class":292}," lang",[278,298,299],{"class":284},"=",[278,301,303],{"class":302},"sZZnC","\"ts\"",[278,305,306],{"class":284},">\n",[278,308,310],{"class":280,"line":309},2,[278,311,313],{"class":312},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[278,315,317,321,324,327],{"class":280,"line":316},3,[278,318,320],{"class":319},"szBVR","import",[278,322,323],{"class":284}," { GoopCard, GoopCardAction, GoopCardContent, GoopCardDescription, GoopCardFooter, GoopCardHeader, GoopCardTitle } ",[278,325,326],{"class":319},"from",[278,328,329],{"class":302}," '@goopui\u002Fvue'\n",[278,331,333,336,338],{"class":280,"line":332},4,[278,334,335],{"class":284},"\u003C\u002F",[278,337,289],{"class":288},[278,339,306],{"class":284},[278,341,343],{"class":280,"line":342},5,[278,344,346],{"emptyLinePlaceholder":345},true,"\n",[278,348,350,352,355],{"class":280,"line":349},6,[278,351,285],{"class":284},[278,353,354],{"class":288},"template",[278,356,306],{"class":284},[278,358,360,363,365,368,370,373],{"class":280,"line":359},7,[278,361,362],{"class":284},"  \u003C",[278,364,218],{"class":288},[278,366,367],{"class":292}," class",[278,369,299],{"class":284},[278,371,372],{"class":302},"\"max-w-sm\"",[278,374,306],{"class":284},[278,376,378,381,383],{"class":280,"line":377},8,[278,379,380],{"class":284},"    \u003C",[278,382,227],{"class":288},[278,384,306],{"class":284},[278,386,388,391,393,396,398],{"class":280,"line":387},9,[278,389,390],{"class":284},"      \u003C",[278,392,230],{"class":288},[278,394,395],{"class":284},">Project Apollo\u003C\u002F",[278,397,230],{"class":288},[278,399,306],{"class":284},[278,401,403,405,407,410,412],{"class":280,"line":402},10,[278,404,390],{"class":284},[278,406,233],{"class":288},[278,408,409],{"class":284},">Three tasks due this week.\u003C\u002F",[278,411,233],{"class":288},[278,413,306],{"class":284},[278,415,417,419,421],{"class":280,"line":416},11,[278,418,390],{"class":284},[278,420,236],{"class":288},[278,422,306],{"class":284},[278,424,426,429,432,435,437,440,443,445],{"class":280,"line":425},12,[278,427,428],{"class":284},"        \u003C",[278,430,431],{"class":288},"GoopBadge",[278,433,434],{"class":292}," variant",[278,436,299],{"class":284},[278,438,439],{"class":302},"\"outline\"",[278,441,442],{"class":284},">Live\u003C\u002F",[278,444,431],{"class":288},[278,446,306],{"class":284},[278,448,450,453,455],{"class":280,"line":449},13,[278,451,452],{"class":284},"      \u003C\u002F",[278,454,236],{"class":288},[278,456,306],{"class":284},[278,458,460,463,465],{"class":280,"line":459},14,[278,461,462],{"class":284},"    \u003C\u002F",[278,464,227],{"class":288},[278,466,306],{"class":284},[278,468,470,472,474,477,479],{"class":280,"line":469},15,[278,471,380],{"class":284},[278,473,239],{"class":288},[278,475,476],{"class":284},">A plain card: no goo unless you ask for it.\u003C\u002F",[278,478,239],{"class":288},[278,480,306],{"class":284},[278,482,484,486,488,490,492,495],{"class":280,"line":483},16,[278,485,380],{"class":284},[278,487,243],{"class":288},[278,489,367],{"class":292},[278,491,299],{"class":284},[278,493,494],{"class":302},"\"gap-2\"",[278,496,306],{"class":284},[278,498,500,502,505,508,510,513,516,518],{"class":280,"line":499},17,[278,501,390],{"class":284},[278,503,504],{"class":288},"GoopButton",[278,506,507],{"class":292}," size",[278,509,299],{"class":284},[278,511,512],{"class":302},"\"sm\"",[278,514,515],{"class":284},">Open\u003C\u002F",[278,517,504],{"class":288},[278,519,306],{"class":284},[278,521,523,525,527,529,531,533,535,537,539,542,544],{"class":280,"line":522},18,[278,524,390],{"class":284},[278,526,504],{"class":288},[278,528,507],{"class":292},[278,530,299],{"class":284},[278,532,512],{"class":302},[278,534,434],{"class":292},[278,536,299],{"class":284},[278,538,439],{"class":302},[278,540,541],{"class":284},">Later\u003C\u002F",[278,543,504],{"class":288},[278,545,306],{"class":284},[278,547,549,551,553],{"class":280,"line":548},19,[278,550,462],{"class":284},[278,552,243],{"class":288},[278,554,306],{"class":284},[278,556,558,561,563],{"class":280,"line":557},20,[278,559,560],{"class":284},"  \u003C\u002F",[278,562,218],{"class":288},[278,564,306],{"class":284},[278,566,568,570,572],{"class":280,"line":567},21,[278,569,335],{"class":284},[278,571,354],{"class":288},[278,573,306],{"class":284},[246,575,577],{"id":576},"goo-hover","Goo hover",[269,579,581],{"className":271,"code":580,"language":273,"meta":274,"style":274},"\u003CGoopCard goo>...\u003C\u002FGoopCard>\n",[208,582,583],{"__ignoreMap":274},[278,584,585,587,589,592,595,597],{"class":280,"line":281},[278,586,285],{"class":284},[278,588,218],{"class":288},[278,590,591],{"class":292}," goo",[278,593,594],{"class":284},">...\u003C\u002F",[278,596,218],{"class":288},[278,598,306],{"class":284},[600,601,604],"preview",{":controls":602,"caption":603},"false","With goo on: move the pointer near an edge.",[198,605],{"set":606},"card-goo",[608,609,610],"ul",{},[611,612,613,617],"li",{},[614,615,616],"strong",{},"swell."," While a mouse or pen is over the card, the edge nearest to it swells outward in a low, wide mound centred on the pointer (about 3px high on playful). The mound trails the pointer with a soft spring, grows as you near the edge, and settles flat when you leave. Near a corner, both edges swell a little.",[205,619,620,621,624],{},"It's one ",[208,622,623],{},"aria-hidden"," SVG path behind the card's content, with no filter. The path redraws the card's own background, border, and corners, so where there's no mound it sits exactly on the card. It only redraws while the mound moves, and it hides once the card is flat. Touch has no hover, so on phones the card stays static.",[246,626,628],{"id":627},"props","Props",[630,631],"component-props",{"name":196},[205,633,634,635,637,638,641,642,644,645,648,649,652,653,656,657,660],{},"The parts (",[208,636,227],{}," and the rest) take ",[208,639,640],{},"class"," only, like shadcn's. ",[208,643,218],{}," exposes ",[208,646,647],{},"handle"," (the live card handle, ",[208,650,651],{},"null"," before mount or with ",[208,654,655],{},"goo"," off) and ",[208,658,659],{},"el",".",[246,662,664],{"id":663},"accessibility","Accessibility",[205,666,667,668,670,671,660],{},"The goo layer is ",[208,669,623],{}," and can't be clicked, and the card's content is never filtered. Under reduced motion the card never swells. See ",[259,672,23],{"href":24},[674,675,676],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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":274,"searchDepth":316,"depth":316,"links":678},[679,680,681,682,683],{"id":248,"depth":309,"text":15},{"id":266,"depth":309,"text":267},{"id":576,"depth":309,"text":577},{"id":627,"depth":309,"text":628},{"id":663,"depth":309,"text":664},"shadcn's Card, static by default. Add goo and the edge nearest the pointer swells gently toward it in a low, wide mound.","md",{},{"title":159,"description":684},"CqrwAnESJb749EDJ57_MppsjlM07bKK9iTmGNayi2PM",[690,692],{"title":155,"path":156,"stem":157,"description":691,"children":-1},"shadcn's Badge. A badge that's a link or a button swells by about a pixel on hover, with a soft gooey overshoot. A plain badge stays still.",{"title":163,"path":164,"stem":165,"description":693,"children":-1},"shadcn's Avatar. When the image loads, or the fallback appears, it plops in with a small gooey settle.",1793670387348]