[{"data":1,"prerenderedAt":702},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fskeleton":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fskeleton":697},[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":151,"badge":48,"body":189,"description":692,"extension":693,"meta":694,"navigation":336,"path":152,"seo":695,"status":13,"stem":153,"__hash__":696},"docs\u002Fdocs\u002F2.components\u002F29.skeleton.md",{"type":190,"value":191,"toc":684},"minimark",[192,200,220,233,237,255,259,462,466,477,480,499,506,556,560,573,578,657,661,664,668,675,680],[193,194,197],"playground",{"caption":195,"name":196},"A list loading. Every skeleton shares one calm drift.","skeleton",[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 skeletons on this page are the real ",[208,217,218],{},"GoopSkeleton",", and the code below is exactly what you write.",[205,221,222,224,225,228,229,232],{},[208,223,218],{}," is shadcn-vue's Skeleton: a ",[208,226,227],{},"div"," with ",[208,230,231],{},"bg-accent rounded-md",", sized and shaped with your own classes. Only the loading animation changes.",[234,235,15],"h2",{"id":236},"installation",[205,238,239,240,242,243,245,246,251,252,254],{},"Install ",[208,241,214],{}," or ",[208,244,210],{}," as shown on the ",[247,248,250],"a",{"href":249},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports ",[208,253,218],{},".",[234,256,258],{"id":257},"usage","Usage",[260,261,266],"pre",{"className":262,"code":263,"language":264,"meta":265,"style":265},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\nimport { GoopSkeleton } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"flex items-center gap-4\">\n    \u003CGoopSkeleton class=\"size-12 rounded-full\" \u002F>\n    \u003Cdiv class=\"grid gap-2\">\n      \u003CGoopSkeleton class=\"h-4 w-[250px]\" \u002F>\n      \u003CGoopSkeleton class=\"h-4 w-[200px]\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[208,267,268,298,305,321,331,338,348,366,384,400,417,433,443,453],{"__ignoreMap":265},[269,270,273,277,281,285,288,291,295],"span",{"class":271,"line":272},"line",1,[269,274,276],{"class":275},"sVt8B","\u003C",[269,278,280],{"class":279},"s9eBZ","script",[269,282,284],{"class":283},"sScJk"," setup",[269,286,287],{"class":283}," lang",[269,289,290],{"class":275},"=",[269,292,294],{"class":293},"sZZnC","\"ts\"",[269,296,297],{"class":275},">\n",[269,299,301],{"class":271,"line":300},2,[269,302,304],{"class":303},"sJ8bj","\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\n",[269,306,308,312,315,318],{"class":271,"line":307},3,[269,309,311],{"class":310},"szBVR","import",[269,313,314],{"class":275}," { GoopSkeleton } ",[269,316,317],{"class":310},"from",[269,319,320],{"class":293}," '@goopui\u002Fvue'\n",[269,322,324,327,329],{"class":271,"line":323},4,[269,325,326],{"class":275},"\u003C\u002F",[269,328,280],{"class":279},[269,330,297],{"class":275},[269,332,334],{"class":271,"line":333},5,[269,335,337],{"emptyLinePlaceholder":336},true,"\n",[269,339,341,343,346],{"class":271,"line":340},6,[269,342,276],{"class":275},[269,344,345],{"class":279},"template",[269,347,297],{"class":275},[269,349,351,354,356,359,361,364],{"class":271,"line":350},7,[269,352,353],{"class":275},"  \u003C",[269,355,227],{"class":279},[269,357,358],{"class":283}," class",[269,360,290],{"class":275},[269,362,363],{"class":293},"\"flex items-center gap-4\"",[269,365,297],{"class":275},[269,367,369,372,374,376,378,381],{"class":271,"line":368},8,[269,370,371],{"class":275},"    \u003C",[269,373,218],{"class":279},[269,375,358],{"class":283},[269,377,290],{"class":275},[269,379,380],{"class":293},"\"size-12 rounded-full\"",[269,382,383],{"class":275}," \u002F>\n",[269,385,387,389,391,393,395,398],{"class":271,"line":386},9,[269,388,371],{"class":275},[269,390,227],{"class":279},[269,392,358],{"class":283},[269,394,290],{"class":275},[269,396,397],{"class":293},"\"grid gap-2\"",[269,399,297],{"class":275},[269,401,403,406,408,410,412,415],{"class":271,"line":402},10,[269,404,405],{"class":275},"      \u003C",[269,407,218],{"class":279},[269,409,358],{"class":283},[269,411,290],{"class":275},[269,413,414],{"class":293},"\"h-4 w-[250px]\"",[269,416,383],{"class":275},[269,418,420,422,424,426,428,431],{"class":271,"line":419},11,[269,421,405],{"class":275},[269,423,218],{"class":279},[269,425,358],{"class":283},[269,427,290],{"class":275},[269,429,430],{"class":293},"\"h-4 w-[200px]\"",[269,432,383],{"class":275},[269,434,436,439,441],{"class":271,"line":435},12,[269,437,438],{"class":275},"    \u003C\u002F",[269,440,227],{"class":279},[269,442,297],{"class":275},[269,444,446,449,451],{"class":271,"line":445},13,[269,447,448],{"class":275},"  \u003C\u002F",[269,450,227],{"class":279},[269,452,297],{"class":275},[269,454,456,458,460],{"class":271,"line":455},14,[269,457,326],{"class":275},[269,459,345],{"class":279},[269,461,297],{"class":275},[234,463,465],{"id":464},"what-it-does","What it does",[467,468,469],"ul",{},[470,471,472,476],"li",{},[473,474,475],"strong",{},"shimmer."," A low, wide mound of slightly lighter goo rises from the bottom edge of the shape and drifts across it, then rests off-shape for a moment before the next pass.",[205,478,479],{},"It's built to be cheap. The mound is one CSS gradient moved with a transform, so no script runs per frame and nothing is filtered. A page with hundreds of skeletons stays smooth.",[205,481,482,483,486,487,490,491,494,495,498],{},"The crest is white at ",[208,484,485],{},"--goop-shimmer-base"," opacity: ",[208,488,489],{},"0.85"," on a light theme (the accent is pale) and ",[208,492,493],{},"0.075"," under ",[208,496,497],{},".dark",". Set the var on any ancestor to tune it.",[500,501,503],"preview",{":controls":502},"false",[198,504],{"set":505},"skeleton-card",[260,507,509],{"className":262,"code":508,"language":264,"meta":265,"style":265},"\u003CGoopSkeleton class=\"h-32 w-full rounded-xl\" \u002F>\n\u003CGoopSkeleton class=\"h-4 w-3\u002F4\" \u002F>\n\u003CGoopSkeleton class=\"h-4 w-1\u002F2\" \u002F>\n",[208,510,511,526,541],{"__ignoreMap":265},[269,512,513,515,517,519,521,524],{"class":271,"line":272},[269,514,276],{"class":275},[269,516,218],{"class":279},[269,518,358],{"class":283},[269,520,290],{"class":275},[269,522,523],{"class":293},"\"h-32 w-full rounded-xl\"",[269,525,383],{"class":275},[269,527,528,530,532,534,536,539],{"class":271,"line":300},[269,529,276],{"class":275},[269,531,218],{"class":279},[269,533,358],{"class":283},[269,535,290],{"class":275},[269,537,538],{"class":293},"\"h-4 w-3\u002F4\"",[269,540,383],{"class":275},[269,542,543,545,547,549,551,554],{"class":271,"line":307},[269,544,276],{"class":275},[269,546,218],{"class":279},[269,548,358],{"class":283},[269,550,290],{"class":275},[269,552,553],{"class":293},"\"h-4 w-1\u002F2\"",[269,555,383],{"class":275},[234,557,559],{"id":558},"presets-and-shimmer-off","Presets and shimmer off",[205,561,562,565,566,569,570,254],{},[208,563,564],{},"preset"," changes the pace and brightness. ",[208,567,568],{},":shimmer=\"false\""," renders shadcn's own ",[208,571,572],{},"animate-pulse",[500,574,575],{":controls":502},[198,576],{"set":577},"skeleton-off",[260,579,581],{"className":262,"code":580,"language":264,"meta":265,"style":265},"\u003CGoopSkeleton class=\"h-4 w-full\" preset=\"subtle\" \u002F>\n\u003CGoopSkeleton class=\"h-4 w-full\" preset=\"wild\" \u002F>\n\u003CGoopSkeleton class=\"h-4 w-full\" :shimmer=\"false\" \u002F>\n",[208,582,583,606,627],{"__ignoreMap":265},[269,584,585,587,589,591,593,596,599,601,604],{"class":271,"line":272},[269,586,276],{"class":275},[269,588,218],{"class":279},[269,590,358],{"class":283},[269,592,290],{"class":275},[269,594,595],{"class":293},"\"h-4 w-full\"",[269,597,598],{"class":283}," preset",[269,600,290],{"class":275},[269,602,603],{"class":293},"\"subtle\"",[269,605,383],{"class":275},[269,607,608,610,612,614,616,618,620,622,625],{"class":271,"line":300},[269,609,276],{"class":275},[269,611,218],{"class":279},[269,613,358],{"class":283},[269,615,290],{"class":275},[269,617,595],{"class":293},[269,619,598],{"class":283},[269,621,290],{"class":275},[269,623,624],{"class":293},"\"wild\"",[269,626,383],{"class":275},[269,628,629,631,633,635,637,639,642,645,647,650,653,655],{"class":271,"line":307},[269,630,276],{"class":275},[269,632,218],{"class":279},[269,634,358],{"class":283},[269,636,290],{"class":275},[269,638,595],{"class":293},[269,640,641],{"class":275}," :",[269,643,644],{"class":283},"shimmer",[269,646,290],{"class":275},[269,648,649],{"class":293},"\"",[269,651,502],{"class":652},"sj4cs",[269,654,649],{"class":293},[269,656,383],{"class":275},[234,658,660],{"id":659},"props","Props",[662,663],"component-props",{"name":196},[234,665,667],{"id":666},"accessibility","Accessibility",[205,669,670,671,674],{},"A skeleton is decoration. Pair it with an ",[208,672,673],{},"aria-busy=\"true\""," region or a visually hidden \"Loading\" message, as you would with shadcn's.",[205,676,677,678,254],{},"Under reduced motion the shimmer stops and the skeleton is a plain, static shape. See ",[247,679,23],{"href":24},[681,682,683],"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);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":265,"searchDepth":307,"depth":307,"links":685},[686,687,688,689,690,691],{"id":236,"depth":300,"text":15},{"id":257,"depth":300,"text":258},{"id":464,"depth":300,"text":465},{"id":558,"depth":300,"text":559},{"id":659,"depth":300,"text":660},{"id":666,"depth":300,"text":667},"shadcn's Skeleton with a slow goo shimmer instead of the grey pulse. A soft, low mound of lighter goo drifts across each shape.","md",{},{"title":151,"description":692},"veEkZ7sswbFo3RRdeISrFLgGEi7uWwVD0wDQg5fzu5w",[698,700],{"title":147,"path":148,"stem":149,"description":699,"children":-1},"shadcn's Context Menu with goo. The menu blooms out of the spot you right-clicked, the highlight is a blob that glides between items, and submenus bloom out of their item.",{"title":155,"path":156,"stem":157,"description":701,"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.",1793670387203]