[{"data":1,"prerenderedAt":994},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Ftabs":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Ftabs":989},[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":90,"badge":13,"body":189,"description":984,"extension":985,"meta":986,"navigation":456,"path":91,"seo":987,"status":13,"stem":92,"__hash__":988},"docs\u002Fdocs\u002F2.components\u002F14.tabs.md",{"type":190,"value":191,"toc":970},"minimark",[192,201,221,234,238,243,268,310,341,345,359,387,391,611,625,629,672,676,682,688,743,747,753,757,783,787,790,795,884,894,898,917,921,941,946,950,966],[193,194,197],"playground",{"caption":195,"name":196},"Click a tab, or focus the list and use the arrow keys.","tabs",[198,199],"demo-tabs",{"set":200},"basic",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,220],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The tabs on this page are the real ",[209,218,219],{},"GoopTabs",", and the code below is exactly what you write.",[206,222,223,225,226,233],{},[209,224,219],{}," wraps the same ",[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Ftabs",[231],"nofollow","reka-ui Tabs"," primitive as shadcn-vue's Tabs, with the same API. Keyboard navigation and ARIA work the same. Swap the imports and you're done.",[235,236,15],"h2",{"id":237},"installation",[239,240,242],"h3",{"id":241},"nuxt","Nuxt",[244,245,250],"pre",{"className":246,"code":247,"language":248,"meta":249,"style":249},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[209,251,252],{"__ignoreMap":249},[253,254,257,261,265],"span",{"class":255,"line":256},"line",1,[253,258,260],{"class":259},"sScJk","pnpm",[253,262,264],{"class":263},"sZZnC"," add",[253,266,267],{"class":263}," @goopui\u002Fnuxt\n",[244,269,274],{"className":270,"code":271,"filename":272,"language":273,"meta":249,"style":249},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[209,275,276,292,304],{"__ignoreMap":249},[253,277,278,282,285,288],{"class":255,"line":256},[253,279,281],{"class":280},"szBVR","export",[253,283,284],{"class":280}," default",[253,286,287],{"class":259}," defineNuxtConfig",[253,289,291],{"class":290},"sVt8B","({\n",[253,293,295,298,301],{"class":255,"line":294},2,[253,296,297],{"class":290},"  modules: [",[253,299,300],{"class":263},"'@goopui\u002Fnuxt'",[253,302,303],{"class":290},"],\n",[253,305,307],{"class":255,"line":306},3,[253,308,309],{"class":290},"})\n",[206,311,312,313,316,317,320,321,324,325,324,328,324,331,324,334,324,337,340],{},"The module auto-imports every ",[209,314,315],{},"GoopTabs*"," part, adds ",[209,318,319],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (",[209,322,323],{},"--muted",", ",[209,326,327],{},"--background",[209,329,330],{},"--foreground",[209,332,333],{},"--input",[209,335,336],{},"--ring",[209,338,339],{},"--radius",").",[239,342,344],{"id":343},"vue","Vue",[244,346,348],{"className":246,"code":347,"language":248,"meta":249,"style":249},"pnpm add @goopui\u002Fvue\n",[209,349,350],{"__ignoreMap":249},[253,351,352,354,356],{"class":255,"line":256},[253,353,260],{"class":259},[253,355,264],{"class":263},[253,357,358],{"class":263}," @goopui\u002Fvue\n",[244,360,365],{"className":361,"code":362,"filename":363,"language":364,"meta":249,"style":249},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[209,366,367,378],{"__ignoreMap":249},[253,368,369,372,375],{"class":255,"line":256},[253,370,371],{"class":280},"@import",[253,373,374],{"class":263}," \"tailwindcss\"",[253,376,377],{"class":290},";\n",[253,379,380,382,385],{"class":255,"line":294},[253,381,371],{"class":280},[253,383,384],{"class":263}," \"@goopui\u002Fvue\u002Fgoop.css\"",[253,386,377],{"class":290},[235,388,390],{"id":389},"usage","Usage",[244,392,395],{"className":393,"code":394,"language":343,"meta":249,"style":249},"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 { GoopTabs, GoopTabsContent, GoopTabsList, GoopTabsTrigger } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopTabs default-value=\"account\">\n    \u003CGoopTabsList>\n      \u003CGoopTabsTrigger value=\"account\">Account\u003C\u002FGoopTabsTrigger>\n      \u003CGoopTabsTrigger value=\"password\">Password\u003C\u002FGoopTabsTrigger>\n    \u003C\u002FGoopTabsList>\n    \u003CGoopTabsContent value=\"account\">Make changes to your account here.\u003C\u002FGoopTabsContent>\n    \u003CGoopTabsContent value=\"password\">Change your password here.\u003C\u002FGoopTabsContent>\n  \u003C\u002FGoopTabs>\n\u003C\u002Ftemplate>\n",[209,396,397,421,427,441,451,458,468,486,497,520,541,551,572,592,602],{"__ignoreMap":249},[253,398,399,402,406,409,412,415,418],{"class":255,"line":256},[253,400,401],{"class":290},"\u003C",[253,403,405],{"class":404},"s9eBZ","script",[253,407,408],{"class":259}," setup",[253,410,411],{"class":259}," lang",[253,413,414],{"class":290},"=",[253,416,417],{"class":263},"\"ts\"",[253,419,420],{"class":290},">\n",[253,422,423],{"class":255,"line":294},[253,424,426],{"class":425},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[253,428,429,432,435,438],{"class":255,"line":306},[253,430,431],{"class":280},"import",[253,433,434],{"class":290}," { GoopTabs, GoopTabsContent, GoopTabsList, GoopTabsTrigger } ",[253,436,437],{"class":280},"from",[253,439,440],{"class":263}," '@goopui\u002Fvue'\n",[253,442,444,447,449],{"class":255,"line":443},4,[253,445,446],{"class":290},"\u003C\u002F",[253,448,405],{"class":404},[253,450,420],{"class":290},[253,452,454],{"class":255,"line":453},5,[253,455,457],{"emptyLinePlaceholder":456},true,"\n",[253,459,461,463,466],{"class":255,"line":460},6,[253,462,401],{"class":290},[253,464,465],{"class":404},"template",[253,467,420],{"class":290},[253,469,471,474,476,479,481,484],{"class":255,"line":470},7,[253,472,473],{"class":290},"  \u003C",[253,475,219],{"class":404},[253,477,478],{"class":259}," default-value",[253,480,414],{"class":290},[253,482,483],{"class":263},"\"account\"",[253,485,420],{"class":290},[253,487,489,492,495],{"class":255,"line":488},8,[253,490,491],{"class":290},"    \u003C",[253,493,494],{"class":404},"GoopTabsList",[253,496,420],{"class":290},[253,498,500,503,506,509,511,513,516,518],{"class":255,"line":499},9,[253,501,502],{"class":290},"      \u003C",[253,504,505],{"class":404},"GoopTabsTrigger",[253,507,508],{"class":259}," value",[253,510,414],{"class":290},[253,512,483],{"class":263},[253,514,515],{"class":290},">Account\u003C\u002F",[253,517,505],{"class":404},[253,519,420],{"class":290},[253,521,523,525,527,529,531,534,537,539],{"class":255,"line":522},10,[253,524,502],{"class":290},[253,526,505],{"class":404},[253,528,508],{"class":259},[253,530,414],{"class":290},[253,532,533],{"class":263},"\"password\"",[253,535,536],{"class":290},">Password\u003C\u002F",[253,538,505],{"class":404},[253,540,420],{"class":290},[253,542,544,547,549],{"class":255,"line":543},11,[253,545,546],{"class":290},"    \u003C\u002F",[253,548,494],{"class":404},[253,550,420],{"class":290},[253,552,554,556,559,561,563,565,568,570],{"class":255,"line":553},12,[253,555,491],{"class":290},[253,557,558],{"class":404},"GoopTabsContent",[253,560,508],{"class":259},[253,562,414],{"class":290},[253,564,483],{"class":263},[253,566,567],{"class":290},">Make changes to your account here.\u003C\u002F",[253,569,558],{"class":404},[253,571,420],{"class":290},[253,573,575,577,579,581,583,585,588,590],{"class":255,"line":574},13,[253,576,491],{"class":290},[253,578,558],{"class":404},[253,580,508],{"class":259},[253,582,414],{"class":290},[253,584,533],{"class":263},[253,586,587],{"class":290},">Change your password here.\u003C\u002F",[253,589,558],{"class":404},[253,591,420],{"class":290},[253,593,595,598,600],{"class":255,"line":594},14,[253,596,597],{"class":290},"  \u003C\u002F",[253,599,219],{"class":404},[253,601,420],{"class":290},[253,603,605,607,609],{"class":255,"line":604},15,[253,606,446],{"class":290},[253,608,465],{"class":404},[253,610,420],{"class":290},[206,612,613,614,616,617,324,619,621,622,624],{},"All the goo lives on ",[209,615,494],{},". ",[209,618,219],{},[209,620,505],{},", and ",[209,623,558],{}," are shadcn's.",[235,626,628],{"id":627},"behavior","Behavior",[630,631,632,646,656,666],"ul",{},[633,634,635,639,640,324,643,340],"li",{},[636,637,638],"strong",{},"The blob"," is the active tab's background. It slides to the new trigger with momentum, stretching with a neck of lumps while it travels, and lands with a jelly overshoot (",[209,641,642],{},"momentum",[209,644,645],{},"wobble",[633,647,648,651,652,655],{},[636,649,650],{},"It follows everything."," Clicks, the arrow keys, and programmatic changes. It tracks whichever trigger has ",[209,653,654],{},"data-state=\"active\"",".",[633,657,658,661,662,665],{},[636,659,660],{},"Labels stay sharp."," The blob is ",[209,663,664],{},"aria-hidden"," and sits behind the real triggers. Text is never filtered.",[633,667,668,671],{},[636,669,670],{},"Server render."," SSR renders shadcn's markup, and the active trigger is styled until the blob attaches in the browser.",[235,673,675],{"id":674},"vertical","Vertical",[206,677,678,681],{},[209,679,680],{},"orientation=\"vertical\""," is reka-ui's. The blob travels along the column:",[683,684,686],"preview",{":controls":685},"false",[198,687],{"set":674},[244,689,691],{"className":393,"code":690,"language":343,"meta":249,"style":249},"\u003CGoopTabs default-value=\"account\" orientation=\"vertical\">\n  \u003CGoopTabsList>\n    \u003CGoopTabsTrigger value=\"account\">Account\u003C\u002FGoopTabsTrigger>\n    \u003CGoopTabsTrigger value=\"password\">Password\u003C\u002FGoopTabsTrigger>\n  \u003C\u002FGoopTabsList>\n\u003C\u002FGoopTabs>\n",[209,692,693,715,720,725,730,735],{"__ignoreMap":249},[253,694,695,697,699,701,703,705,708,710,713],{"class":255,"line":256},[253,696,401],{"class":290},[253,698,219],{"class":404},[253,700,478],{"class":259},[253,702,414],{"class":290},[253,704,483],{"class":263},[253,706,707],{"class":259}," orientation",[253,709,414],{"class":290},[253,711,712],{"class":263},"\"vertical\"",[253,714,420],{"class":290},[253,716,717],{"class":255,"line":294},[253,718,719],{"class":290},"  \u003CGoopTabsList>\n",[253,721,722],{"class":255,"line":306},[253,723,724],{"class":290},"    \u003CGoopTabsTrigger value=\"account\">Account\u003C\u002FGoopTabsTrigger>\n",[253,726,727],{"class":255,"line":443},[253,728,729],{"class":290},"    \u003CGoopTabsTrigger value=\"password\">Password\u003C\u002FGoopTabsTrigger>\n",[253,731,732],{"class":255,"line":453},[253,733,734],{"class":290},"  \u003C\u002FGoopTabsList>\n",[253,736,737,739,741],{"class":255,"line":460},[253,738,446],{"class":290},[253,740,219],{"class":404},[253,742,420],{"class":290},[235,744,746],{"id":745},"line-variant","Line variant",[206,748,749,752],{},[209,750,751],{},"variant=\"line\""," is shadcn's underline style. It keeps the underline and has no goo, since there's no filled surface to melt:",[683,754,755],{":controls":685},[198,756],{"set":255},[244,758,760],{"className":393,"code":759,"language":343,"meta":249,"style":249},"\u003CGoopTabsList variant=\"line\">...\u003C\u002FGoopTabsList>\n",[209,761,762],{"__ignoreMap":249},[253,763,764,766,768,771,773,776,779,781],{"class":255,"line":256},[253,765,401],{"class":290},[253,767,494],{"class":404},[253,769,770],{"class":259}," variant",[253,772,414],{"class":290},[253,774,775],{"class":263},"\"line\"",[253,777,778],{"class":290},">...\u003C\u002F",[253,780,494],{"class":404},[253,782,420],{"class":290},[235,784,786],{"id":785},"tuning","Tuning",[206,788,789],{},"Turn off the jelly or the stretch, change the feel, or go plain shadcn:",[683,791,792],{":controls":685},[198,793],{"set":794},"plain",[244,796,798],{"className":393,"code":797,"language":343,"meta":249,"style":249},"\u003CGoopTabsList preset=\"wild\">...\u003C\u002FGoopTabsList>\n\u003CGoopTabsList :wobble=\"false\" :momentum=\"false\">...\u003C\u002FGoopTabsList>\n\u003CGoopTabsList :goo=\"false\">...\u003C\u002FGoopTabsList>\n",[209,799,800,820,859],{"__ignoreMap":249},[253,801,802,804,806,809,811,814,816,818],{"class":255,"line":256},[253,803,401],{"class":290},[253,805,494],{"class":404},[253,807,808],{"class":259}," preset",[253,810,414],{"class":290},[253,812,813],{"class":263},"\"wild\"",[253,815,778],{"class":290},[253,817,494],{"class":404},[253,819,420],{"class":290},[253,821,822,824,826,829,831,833,836,839,841,843,845,847,849,851,853,855,857],{"class":255,"line":294},[253,823,401],{"class":290},[253,825,494],{"class":404},[253,827,828],{"class":290}," :",[253,830,645],{"class":259},[253,832,414],{"class":290},[253,834,835],{"class":263},"\"",[253,837,685],{"class":838},"sj4cs",[253,840,835],{"class":263},[253,842,828],{"class":290},[253,844,642],{"class":259},[253,846,414],{"class":290},[253,848,835],{"class":263},[253,850,685],{"class":838},[253,852,835],{"class":263},[253,854,778],{"class":290},[253,856,494],{"class":404},[253,858,420],{"class":290},[253,860,861,863,865,867,870,872,874,876,878,880,882],{"class":255,"line":306},[253,862,401],{"class":290},[253,864,494],{"class":404},[253,866,828],{"class":290},[253,868,869],{"class":259},"goo",[253,871,414],{"class":290},[253,873,835],{"class":263},[253,875,685],{"class":838},[253,877,835],{"class":263},[253,879,778],{"class":290},[253,881,494],{"class":404},[253,883,420],{"class":290},[206,885,886,889,890,893],{},[209,887,888],{},":indicator=\"false\""," keeps the list's goo setting but gives the active tab shadcn's flat background. ",[209,891,892],{},":goo=\"false\""," renders exactly shadcn's TabsList and TabsTrigger.",[235,895,897],{"id":896},"driving-it-from-code","Driving it from code",[206,899,900,902,903,906,907,910,911,913,914,916],{},[209,901,494],{}," exposes ",[209,904,905],{},"handle",", the live indicator handle (",[209,908,909],{},"null"," before mount, when ",[209,912,869],{}," is off, or on the ",[209,915,255],{}," variant).",[235,918,920],{"id":919},"props","Props",[206,922,923,324,925,621,927,929,930,932,933,936,937,940],{},[209,924,219],{},[209,926,505],{},[209,928,558],{}," take shadcn-vue's props. ",[209,931,494],{}," takes reka-ui's ",[209,934,935],{},"TabsList"," props, ",[209,938,939],{},"class",", and these:",[942,943],"component-props",{"name":196,"part":944},[945],"list",[235,947,949],{"id":948},"accessibility","Accessibility",[206,951,952,953,956,957,212,960,963,964,655],{},"It's reka-ui's Tabs: a ",[209,954,955],{},"tablist"," with ",[209,958,959],{},"tab",[209,961,962],{},"tabpanel"," roles, roving focus, and arrow, Home, and End keys. Under reduced motion the blob snaps to the new tab with no stretch or overshoot, and still marks the active tab. See ",[227,965,23],{"href":24},[967,968,969],"style",{},"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 .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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":249,"searchDepth":306,"depth":306,"links":971},[972,976,977,978,979,980,981,982,983],{"id":237,"depth":294,"text":15,"children":973},[974,975],{"id":241,"depth":306,"text":242},{"id":343,"depth":306,"text":344},{"id":389,"depth":294,"text":390},{"id":627,"depth":294,"text":628},{"id":674,"depth":294,"text":675},{"id":745,"depth":294,"text":746},{"id":785,"depth":294,"text":786},{"id":896,"depth":294,"text":897},{"id":919,"depth":294,"text":920},{"id":948,"depth":294,"text":949},"shadcn's Tabs with goo. The active tab is a blob that slides between triggers and lands with a jelly overshoot.","md",{},{"title":90,"description":984},"np3uFfqdCxUrG01NTXdfzRwvSI3UMnJxCjCF8FQXZjU",[990,992],{"title":86,"path":87,"stem":88,"description":991,"children":-1},"shadcn's Tooltip with goo. A small label that blooms open, quick and light.",{"title":94,"path":95,"stem":96,"description":993,"children":-1},"shadcn's Accordion and Collapsible with goo. The open row floods with goo from where you clicked, and the content springs open.",1793670386989]