[{"data":1,"prerenderedAt":801},["ShallowReactive",2],{"navigation":3,"\u002Fguide\u002Fgetting-started":102,"\u002Fguide\u002Fgetting-started-surround":798},[4,19,92],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":18},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,14],{"title":11,"path":12,"stem":13},"Getting started","\u002Fguide\u002Fgetting-started","1.guide\u002F1.getting-started",{"title":15,"path":16,"stem":17},"Theming","\u002Fguide\u002Ftheming","1.guide\u002F2.theming",false,{"title":20,"icon":21,"path":22,"stem":23,"children":24},"Components","i-lucide-shapes","\u002Fcomponents","2.components",[25,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88],{"title":26,"path":22,"stem":27},"Overview","2.components\u002Findex",{"title":29,"path":30,"stem":31},"Card","\u002Fcomponents\u002Fcard","2.components\u002Fcard",{"title":33,"path":34,"stem":35},"Code block","\u002Fcomponents\u002Fcode-block","2.components\u002Fcode-block",{"title":37,"path":38,"stem":39},"Date field","\u002Fcomponents\u002Fdate-field","2.components\u002Fdate-field",{"title":41,"path":42,"stem":43},"Drawer","\u002Fcomponents\u002Fdrawer","2.components\u002Fdrawer",{"title":45,"path":46,"stem":47},"Ecosystem mark","\u002Fcomponents\u002Fecosystem-mark","2.components\u002Fecosystem-mark",{"title":49,"path":50,"stem":51},"Identifier","\u002Fcomponents\u002Fidentifier","2.components\u002Fidentifier",{"title":53,"path":54,"stem":55},"Kicker","\u002Fcomponents\u002Fkicker","2.components\u002Fkicker",{"title":57,"path":58,"stem":59},"Modal","\u002Fcomponents\u002Fmodal","2.components\u002Fmodal",{"title":61,"path":62,"stem":63},"Number input","\u002Fcomponents\u002Fnumber-input","2.components\u002Fnumber-input",{"title":65,"path":66,"stem":67},"Quota meter","\u002Fcomponents\u002Fquota-meter","2.components\u002Fquota-meter",{"title":69,"path":70,"stem":71},"Repeating list","\u002Fcomponents\u002Frepeating-list","2.components\u002Frepeating-list",{"title":73,"path":74,"stem":75},"Slideover","\u002Fcomponents\u002Fslideover","2.components\u002Fslideover",{"title":77,"path":78,"stem":79},"Slots","\u002Fcomponents\u002Fslots","2.components\u002Fslots",{"title":81,"path":82,"stem":83},"Status","\u002Fcomponents\u002Fstatus","2.components\u002Fstatus",{"title":85,"path":86,"stem":87},"Theme toggle","\u002Fcomponents\u002Ftheme-toggle","2.components\u002Ftheme-toggle",{"title":89,"path":90,"stem":91},"Token reveal","\u002Fcomponents\u002Ftoken-reveal","2.components\u002Ftoken-reveal",{"title":93,"icon":94,"path":95,"stem":96,"children":97,"page":18},"Utilities","i-lucide-wrench","\u002Futilities","3.utilities",[98],{"title":99,"path":100,"stem":101},"Select none","\u002Futilities\u002Fselect-none","3.utilities\u002Fselect-none",{"id":103,"title":11,"body":104,"component":792,"description":793,"extension":794,"meta":795,"navigation":550,"path":12,"preview":792,"seo":796,"stem":13,"wraps":792,"__hash__":797},"docs\u002F1.guide\u002F1.getting-started.md",{"type":105,"value":106,"toc":782},"minimark",[107,124,129,136,189,196,201,227,313,317,331,424,431,504,508,519,584,587,633,637,640,670,678,682,750,759,763,778],[108,109,110],"warning",{},[111,112,113,114,118,119,123],"p",{},"Zoo UI is ",[115,116,117],"strong",{},"not released yet",": the ",[120,121,122],"code",{},"@zooui\u002F*"," packages are not on npm. This is how they will install.",[125,126,128],"h2",{"id":127},"choose-a-layer","Choose a layer",[111,130,131,132,135],{},"Zoo UI is two Nuxt layers. Your app extends ",[115,133,134],{},"one"," of them.",[137,138,139,155],"table",{},[140,141,142],"thead",{},[143,144,145,149,152],"tr",{},[146,147,148],"th",{},"Your product",[146,150,151],{},"Extends",[146,153,154],{},"Imports",[156,157,158,174],"tbody",{},[143,159,160,164,169],{},[161,162,163],"td",{},"Wears the Forest theme",[161,165,166],{},[120,167,168],{},"@zooui\u002Ftheme-forest",[161,170,171],{},[120,172,173],{},"@zooui\u002Ftheme-forest\u002Fassets\u002Fcss\u002Fforest.css",[143,175,176,179,184],{},[161,177,178],{},"Has a look of its own",[161,180,181],{},[120,182,183],{},"@zooui\u002Fnuxt",[161,185,186],{},[120,187,188],{},"@zooui\u002Fnuxt\u002Fassets\u002Fcss\u002Fbase.css",[111,190,191,192,195],{},"The theme layer extends the base, so a Forest product gets both from one line. A product with its own look extends the base alone and keeps its own colors, typefaces and color-mode key. The ",[120,193,194],{},"Z*"," components still work there, in its colors.",[197,198,200],"h3",{"id":199},"with-the-forest-theme","With the Forest theme",[202,203,209],"pre",{"className":204,"code":205,"filename":206,"language":207,"meta":208,"style":208},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","pnpm add @zooui\u002Ftheme-forest\n","Terminal","bash","",[120,210,211],{"__ignoreMap":208},[212,213,216,220,224],"span",{"class":214,"line":215},"line",1,[212,217,219],{"class":218},"sbgvK","pnpm",[212,221,223],{"class":222},"s_sjI"," add",[212,225,226],{"class":222}," @zooui\u002Ftheme-forest\n",[202,228,233],{"className":229,"code":230,"filename":231,"language":232,"meta":208,"style":208},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark","export default defineNuxtConfig({\n  extends: ['@zooui\u002Ftheme-forest'],\n  css: ['~\u002Fassets\u002Fcss\u002Fmain.css'],\n})\n","nuxt.config.ts","ts",[120,234,235,256,283,304],{"__ignoreMap":208},[212,236,237,241,244,248,252],{"class":214,"line":215},[212,238,240],{"class":239},"sVHd0","export",[212,242,243],{"class":239}," default",[212,245,247],{"class":246},"sGLFI"," defineNuxtConfig",[212,249,251],{"class":250},"su5hD","(",[212,253,255],{"class":254},"sP7_E","{\n",[212,257,259,263,266,269,273,275,277,280],{"class":214,"line":258},2,[212,260,262],{"class":261},"skxfh","  extends",[212,264,265],{"class":254},":",[212,267,268],{"class":250}," [",[212,270,272],{"class":271},"sjJ54","'",[212,274,168],{"class":222},[212,276,272],{"class":271},[212,278,279],{"class":250},"]",[212,281,282],{"class":254},",\n",[212,284,286,289,291,293,295,298,300,302],{"class":214,"line":285},3,[212,287,288],{"class":261},"  css",[212,290,265],{"class":254},[212,292,268],{"class":250},[212,294,272],{"class":271},[212,296,297],{"class":222},"~\u002Fassets\u002Fcss\u002Fmain.css",[212,299,272],{"class":271},[212,301,279],{"class":250},[212,303,282],{"class":254},[212,305,307,310],{"class":214,"line":306},4,[212,308,309],{"class":254},"}",[212,311,312],{"class":250},")\n",[197,314,316],{"id":315},"theme-free-with-your-own-look","Theme-free, with your own look",[202,318,320],{"className":204,"code":319,"filename":206,"language":207,"meta":208,"style":208},"pnpm add @zooui\u002Fnuxt\n",[120,321,322],{"__ignoreMap":208},[212,323,324,326,328],{"class":214,"line":215},[212,325,219],{"class":218},[212,327,223],{"class":222},[212,329,330],{"class":222}," @zooui\u002Fnuxt\n",[202,332,334],{"className":229,"code":333,"filename":231,"language":232,"meta":208,"style":208},"export default defineNuxtConfig({\n  extends: ['@zooui\u002Fnuxt'],\n  css: ['~\u002Fassets\u002Fcss\u002Fmain.css'],\n  \u002F\u002F your color mode stays yours\n  colorMode: { storageKey: 'acme-color-mode' },\n})\n",[120,335,336,348,366,384,390,417],{"__ignoreMap":208},[212,337,338,340,342,344,346],{"class":214,"line":215},[212,339,240],{"class":239},[212,341,243],{"class":239},[212,343,247],{"class":246},[212,345,251],{"class":250},[212,347,255],{"class":254},[212,349,350,352,354,356,358,360,362,364],{"class":214,"line":258},[212,351,262],{"class":261},[212,353,265],{"class":254},[212,355,268],{"class":250},[212,357,272],{"class":271},[212,359,183],{"class":222},[212,361,272],{"class":271},[212,363,279],{"class":250},[212,365,282],{"class":254},[212,367,368,370,372,374,376,378,380,382],{"class":214,"line":285},[212,369,288],{"class":261},[212,371,265],{"class":254},[212,373,268],{"class":250},[212,375,272],{"class":271},[212,377,297],{"class":222},[212,379,272],{"class":271},[212,381,279],{"class":250},[212,383,282],{"class":254},[212,385,386],{"class":214,"line":306},[212,387,389],{"class":388},"sutJx","  \u002F\u002F your color mode stays yours\n",[212,391,393,396,398,401,404,406,409,412,414],{"class":214,"line":392},5,[212,394,395],{"class":261},"  colorMode",[212,397,265],{"class":254},[212,399,400],{"class":254}," {",[212,402,403],{"class":261}," storageKey",[212,405,265],{"class":254},[212,407,408],{"class":271}," '",[212,410,411],{"class":222},"acme-color-mode",[212,413,272],{"class":271},[212,415,416],{"class":254}," },\n",[212,418,420,422],{"class":214,"line":419},6,[212,421,309],{"class":254},[212,423,312],{"class":250},[111,425,426,427,430],{},"Your palette goes in ",[120,428,429],{},"app.config.ts",", as with plain Nuxt UI:",[202,432,435],{"className":229,"code":433,"filename":434,"language":232,"meta":208,"style":208},"export default defineAppConfig({\n  ui: { colors: { primary: 'sky', neutral: 'slate' } },\n})\n","app\u002Fapp.config.ts",[120,436,437,450,498],{"__ignoreMap":208},[212,438,439,441,443,446,448],{"class":214,"line":215},[212,440,240],{"class":239},[212,442,243],{"class":239},[212,444,445],{"class":246}," defineAppConfig",[212,447,251],{"class":250},[212,449,255],{"class":254},[212,451,452,455,457,459,462,464,466,469,471,473,476,478,481,484,486,488,491,493,496],{"class":214,"line":258},[212,453,454],{"class":261},"  ui",[212,456,265],{"class":254},[212,458,400],{"class":254},[212,460,461],{"class":261}," colors",[212,463,265],{"class":254},[212,465,400],{"class":254},[212,467,468],{"class":261}," primary",[212,470,265],{"class":254},[212,472,408],{"class":271},[212,474,475],{"class":222},"sky",[212,477,272],{"class":271},[212,479,480],{"class":254},",",[212,482,483],{"class":261}," neutral",[212,485,265],{"class":254},[212,487,408],{"class":271},[212,489,490],{"class":222},"slate",[212,492,272],{"class":271},[212,494,495],{"class":254}," }",[212,497,416],{"class":254},[212,499,500,502],{"class":214,"line":285},[212,501,309],{"class":254},[212,503,312],{"class":250},[125,505,507],{"id":506},"the-one-css-entry","The one CSS entry",[111,509,510,511,514,515,518],{},"The layers register Nuxt UI but ",[115,512,513],{},"not"," the stylesheet. Your app owns its single Tailwind entry, and the layer's stylesheet is its first line. Your own tokens, utilities and ",[120,516,517],{},"@source"," lines go after it, in the same file: one Tailwind compile.",[202,520,525],{"className":521,"code":522,"filename":523,"language":524,"meta":208,"style":208},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","@import \"@zooui\u002Ftheme-forest\u002Fassets\u002Fcss\u002Fforest.css\";   \u002F* or @zooui\u002Fnuxt\u002Fassets\u002Fcss\u002Fbase.css *\u002F\n\n@theme {\n  --color-brand: #117d72;\n}\n","app\u002Fassets\u002Fcss\u002Fmain.css","css",[120,526,527,546,552,560,579],{"__ignoreMap":208},[212,528,529,532,535,537,540,543],{"class":214,"line":215},[212,530,531],{"class":239},"@import",[212,533,534],{"class":271}," \"",[212,536,173],{"class":222},[212,538,539],{"class":271},"\"",[212,541,542],{"class":254},";",[212,544,545],{"class":388},"   \u002F* or @zooui\u002Fnuxt\u002Fassets\u002Fcss\u002Fbase.css *\u002F\n",[212,547,548],{"class":214,"line":258},[212,549,551],{"emptyLinePlaceholder":550},true,"\n",[212,553,554,557],{"class":214,"line":285},[212,555,556],{"class":239},"@theme",[212,558,559],{"class":254}," {\n",[212,561,562,566,568,572,576],{"class":214,"line":306},[212,563,565],{"class":564},"sMMDD","  --color-brand",[212,567,265],{"class":254},[212,569,571],{"class":570},"s39Yj"," #",[212,573,575],{"class":574},"s_hVV","117d72",[212,577,578],{"class":254},";\n",[212,580,581],{"class":214,"line":392},[212,582,583],{"class":254},"}\n",[111,585,586],{},"Three rules keep it working, and the base fails the build with the fix if one is broken:",[588,589,590,609,623],"ul",{},[591,592,593,608],"li",{},[115,594,595,596,599,600,603,604,607],{},"Don't add ",[120,597,598],{},"@nuxt\u002Fui",", ",[120,601,602],{},"tailwindcss"," or ",[120,605,606],{},"@tailwindcss\u002Fvite"," yourself."," The layer owns them; a second Tailwind registration fails the build.",[591,610,611,614,615,618,619,622],{},[115,612,613],{},"Match the layer and the stylesheet."," ",[120,616,617],{},"forest.css"," with the base layer alone, or ",[120,620,621],{},"base.css"," under the theme layer, is half a theme and fails the build.",[591,624,625,632],{},[115,626,627,628,631],{},"Wrap the app in ",[120,629,630],{},"\u003CUApp>","."," Nuxt UI mounts toasts, tooltips and overlays through it.",[125,634,636],{"id":635},"pick-a-scheme","Pick a scheme",[111,638,639],{},"Forest has six accent schemes. Teal is the default; to use another, import its file after the layer's stylesheet:",[202,641,643],{"className":521,"code":642,"filename":523,"language":524,"meta":208,"style":208},"@import \"@zooui\u002Ftheme-forest\u002Fassets\u002Fcss\u002Fforest.css\";\n@import \"@zooui\u002Ftheme-forest\u002Fschemes\u002Fink-indigo.css\";\n",[120,644,645,657],{"__ignoreMap":208},[212,646,647,649,651,653,655],{"class":214,"line":215},[212,648,531],{"class":239},[212,650,534],{"class":271},[212,652,173],{"class":222},[212,654,539],{"class":271},[212,656,578],{"class":254},[212,658,659,661,663,666,668],{"class":214,"line":258},[212,660,531],{"class":239},[212,662,534],{"class":271},[212,664,665],{"class":222},"@zooui\u002Ftheme-forest\u002Fschemes\u002Fink-indigo.css",[212,667,539],{"class":271},[212,669,578],{"class":254},[111,671,672,673,677],{},"A scheme only redefines raw color ramps, so that one line is all it takes. The ",[674,675,676],"a",{"href":16},"theming guide"," lists them, and the picker in this site's header switches between them live.",[125,679,681],{"id":680},"minimum-versions","Minimum versions",[137,683,684,696],{},[140,685,686],{},[143,687,688,690,693],{},[146,689],{},[146,691,692],{},"Minimum",[146,694,695],{},"Why",[156,697,698,713,728,739],{},[143,699,700,703,706],{},[161,701,702],{},"Nuxt",[161,704,705],{},"4.1",[161,707,708,709,712],{},"Nuxt UI 4's own floor, and the layers' peer range (",[120,710,711],{},"^4.1.0",").",[143,714,715,718,725],{},[161,716,717],{},"Nuxt UI",[161,719,720,721,724],{},"4.11 (",[120,722,723],{},"~4.11.1",")",[161,726,727],{},"The layer's own dependency. Don't add your own.",[143,729,730,733,736],{},[161,731,732],{},"Tailwind CSS",[161,734,735],{},"4.3.3",[161,737,738],{},"What Nuxt UI 4.11 depends on. It comes with Nuxt UI.",[143,740,741,744,747],{},[161,742,743],{},"Node",[161,745,746],{},"22",[161,748,749],{},"Nuxt UI 4.11 needs 22.12 or later on the 22 line.",[111,751,752,753,755,756,758],{},"A product on an older Nuxt UI removes its own ",[120,754,598],{}," and ",[120,757,602],{}," when it adopts Zoo UI, and gets 4.11 through the layer.",[125,760,762],{"id":761},"next","Next",[588,764,765,770],{},[591,766,767,769],{},[674,768,15],{"href":16},": the Forest theme, its schemes, typefaces and per-section accents.",[591,771,772,774,775,777],{},[674,773,20],{"href":22},": every ",[120,776,194],{}," component, with live examples and its API.",[779,780,781],"style",{},"html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sMMDD, html code.shiki .sMMDD{--shiki-light:#90A4AE;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":208,"searchDepth":285,"depth":285,"links":783},[784,788,789,790,791],{"id":127,"depth":258,"text":128,"children":785},[786,787],{"id":199,"depth":285,"text":200},{"id":315,"depth":285,"text":316},{"id":506,"depth":258,"text":507},{"id":635,"depth":258,"text":636},{"id":680,"depth":258,"text":681},{"id":761,"depth":258,"text":762},null,"Add Zoo UI to a Nuxt app, with the Forest theme or with your own look.","md",{},{"title":11,"description":793},"TpKhDZf5c6B9XGMhHCbw_bcZxUhC3neycwbkxGfkG6k",[792,799],{"title":15,"path":16,"stem":17,"description":800,"children":-1},"The Forest theme, its six schemes, the gray ramp, colored edges, per-section accents and the font hooks.",1794711775782]