[{"data":1,"prerenderedAt":535},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Favatar":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Favatar":530},[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":163,"badge":48,"body":189,"description":525,"extension":526,"meta":527,"navigation":352,"path":164,"seo":528,"status":13,"stem":165,"__hash__":529},"docs\u002Fdocs\u002F2.components\u002F32.avatar.md",{"type":190,"value":191,"toc":518},"minimark",[192,200,220,253,257,271,275,434,438,449,452,459,463,466,501,505,514],[193,194,197],"playground",{"caption":195,"name":196},"Press replay to watch them settle again.","avatar",[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 avatars on this page are the real ",[208,217,218],{},"GoopAvatar",", and the code below is exactly what you write.",[205,221,222,224,225,228,229,232,233,224,242,228,245,248,249,252],{},[208,223,218],{},", ",[208,226,227],{},"GoopAvatarImage",", and ",[208,230,231],{},"GoopAvatarFallback"," wrap reka-ui's ",[234,235,239],"a",{"href":236,"rel":237},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Favatar",[238],"nofollow",[208,240,241],{},"AvatarRoot",[208,243,244],{},"AvatarImage",[208,246,247],{},"AvatarFallback",", like shadcn-vue's Avatar. Image loading, ",[208,250,251],{},"delayMs",", and the fallback swap all come from reka-ui.",[254,255,15],"h2",{"id":256},"installation",[205,258,259,260,262,263,265,266,270],{},"Install ",[208,261,214],{}," or ",[208,264,210],{}," as shown on the ",[234,267,269],{"href":268},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports all three.",[254,272,274],{"id":273},"usage","Usage",[276,277,282],"pre",{"className":278,"code":279,"language":280,"meta":281,"style":281},"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 { GoopAvatar, GoopAvatarFallback, GoopAvatarImage } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopAvatar>\n    \u003CGoopAvatarImage src=\"\u002Fme.png\" alt=\"Tim McMasters\" \u002F>\n    \u003CGoopAvatarFallback>TM\u003C\u002FGoopAvatarFallback>\n  \u003C\u002FGoopAvatar>\n\u003C\u002Ftemplate>\n","vue","",[208,283,284,314,321,337,347,354,364,374,401,415,425],{"__ignoreMap":281},[285,286,289,293,297,301,304,307,311],"span",{"class":287,"line":288},"line",1,[285,290,292],{"class":291},"sVt8B","\u003C",[285,294,296],{"class":295},"s9eBZ","script",[285,298,300],{"class":299},"sScJk"," setup",[285,302,303],{"class":299}," lang",[285,305,306],{"class":291},"=",[285,308,310],{"class":309},"sZZnC","\"ts\"",[285,312,313],{"class":291},">\n",[285,315,317],{"class":287,"line":316},2,[285,318,320],{"class":319},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[285,322,324,328,331,334],{"class":287,"line":323},3,[285,325,327],{"class":326},"szBVR","import",[285,329,330],{"class":291}," { GoopAvatar, GoopAvatarFallback, GoopAvatarImage } ",[285,332,333],{"class":326},"from",[285,335,336],{"class":309}," '@goopui\u002Fvue'\n",[285,338,340,343,345],{"class":287,"line":339},4,[285,341,342],{"class":291},"\u003C\u002F",[285,344,296],{"class":295},[285,346,313],{"class":291},[285,348,350],{"class":287,"line":349},5,[285,351,353],{"emptyLinePlaceholder":352},true,"\n",[285,355,357,359,362],{"class":287,"line":356},6,[285,358,292],{"class":291},[285,360,361],{"class":295},"template",[285,363,313],{"class":291},[285,365,367,370,372],{"class":287,"line":366},7,[285,368,369],{"class":291},"  \u003C",[285,371,218],{"class":295},[285,373,313],{"class":291},[285,375,377,380,382,385,387,390,393,395,398],{"class":287,"line":376},8,[285,378,379],{"class":291},"    \u003C",[285,381,227],{"class":295},[285,383,384],{"class":299}," src",[285,386,306],{"class":291},[285,388,389],{"class":309},"\"\u002Fme.png\"",[285,391,392],{"class":299}," alt",[285,394,306],{"class":291},[285,396,397],{"class":309},"\"Tim McMasters\"",[285,399,400],{"class":291}," \u002F>\n",[285,402,404,406,408,411,413],{"class":287,"line":403},9,[285,405,379],{"class":291},[285,407,231],{"class":295},[285,409,410],{"class":291},">TM\u003C\u002F",[285,412,231],{"class":295},[285,414,313],{"class":291},[285,416,418,421,423],{"class":287,"line":417},10,[285,419,420],{"class":291},"  \u003C\u002F",[285,422,218],{"class":295},[285,424,313],{"class":291},[285,426,428,430,432],{"class":287,"line":427},11,[285,429,342],{"class":291},[285,431,361],{"class":295},[285,433,313],{"class":291},[254,435,437],{"id":436},"what-it-does","What it does",[439,440,441],"ul",{},[442,443,444,448],"li",{},[445,446,447],"strong",{},"settle."," reka-ui renders the image only once it has loaded. When it appears (and when the fallback appears), it scales in from about 80%, overshoots by a few percent with a slight squash, rebounds, and settles. It plays once per appearance.",[205,450,451],{},"It's a single CSS animation on a transform, with no script. While the settle is on, the avatar lets the overshoot show past its circle, and the image rounds its own corners.",[205,453,454,455,458],{},"Turn it off with ",[208,456,457],{},":settle=\"false\"",", or scale the overshoot with a number.",[254,460,462],{"id":461},"props","Props",[464,465],"component-props",{"name":196},[205,467,468,470,471,224,474,228,477,480,481,484,485,487,488,224,490,228,493,496,497,500],{},[208,469,227],{}," takes reka-ui's ",[208,472,473],{},"src",[208,475,476],{},"referrerPolicy",[208,478,479],{},"crossOrigin",", and emits ",[208,482,483],{},"loadingStatusChange",". ",[208,486,231],{}," takes ",[208,489,251],{},[208,491,492],{},"as",[208,494,495],{},"asChild",". Both take ",[208,498,499],{},"class",".",[254,502,504],{"id":503},"accessibility","Accessibility",[205,506,507,508,511,512,500],{},"Give the image an ",[208,509,510],{},"alt",". Under reduced motion the avatar appears at once, without the settle. See ",[234,513,23],{"href":24},[515,516,517],"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":281,"searchDepth":323,"depth":323,"links":519},[520,521,522,523,524],{"id":256,"depth":316,"text":15},{"id":273,"depth":316,"text":274},{"id":436,"depth":316,"text":437},{"id":461,"depth":316,"text":462},{"id":503,"depth":316,"text":504},"shadcn's Avatar. When the image loads, or the fallback appears, it plops in with a small gooey settle.","md",{},{"title":163,"description":525},"i0zneANXnI1rgUxEpjEP1AoIr1JwiVvRbYbgss_T2y4",[531,533],{"title":159,"path":160,"stem":161,"description":532,"children":-1},"shadcn's Card, static by default. Add goo and the edge nearest the pointer swells gently toward it in a low, wide mound.",{"title":167,"path":168,"stem":169,"description":534,"children":-1},"shadcn's Separator, ported as is. No goo, here for a complete catalog.",1793670387359]