[{"data":1,"prerenderedAt":569},["ShallowReactive",2],{"navigation":3,"home":102,"component-gallery":507},[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,"page":-1},"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":104,"body":105,"component":499,"description":500,"extension":501,"meta":502,"navigation":18,"path":503,"preview":499,"seo":504,"stem":505,"wraps":499,"__hash__":506},"docs\u002Findex.md","Nuxt UI as it ships, with themes on top",{"type":106,"value":107,"toc":493},"minimark",[108,113,117,144,154,158,213,217,220,312,315,340,347,476,483,486,489],[109,110,112],"h2",{"id":111},"what-zoo-ui-is","What Zoo UI is",[114,115,116],"p",{},"Nuxt UI is already a polished, accessible component library. Zoo UI does not restyle it. It adds three things:",[118,119,120,132,138],"ul",{},[121,122,123,127,128,131],"li",{},[124,125,126],"strong",{},"Themes, as layers you opt into."," A theme chooses colors, typefaces and the page ground, and stops there: radius, spacing, shadows, motion and focus rings stay Nuxt UI's. This site wears ",[124,129,130],{},"Forest",", the first theme. Pick another scheme from the header and every component repaints.",[121,133,134,137],{},[124,135,136],{},"Components Nuxt UI doesn't have."," Status by shape, quota meters, shown-once tokens, a code surface with copy, package-ecosystem marks, and a few more, all written on Nuxt UI's semantic tokens so they take whatever colors your product gives Nuxt UI.",[121,139,140,143],{},[124,141,142],{},"Colored edges."," One addition to Nuxt UI's surfaces: a 3px edge in the surface's color, on cards, dialogs, slideovers and drawers.",[145,146,147],"warning",{},[114,148,149,150,153],{},"Zoo UI is ",[124,151,152],{},"not released yet",". The packages below are not on npm; these docs describe them as they will ship.",[109,155,157],{"id":156},"two-packages","Two packages",[159,160,161,174],"table",{},[162,163,164],"thead",{},[165,166,167,171],"tr",{},[168,169,170],"th",{},"Package",[168,172,173],{},"What you get",[175,176,177,197],"tbody",{},[165,178,179,186],{},[180,181,182],"td",{},[183,184,185],"code",{},"@zooui\u002Fnuxt",[180,187,188,189,192,193,196],{},"The ",[124,190,191],{},"theme-free base",": Nuxt UI as it ships, every ",[183,194,195],{},"Z*"," component, the colored-edge wrappers, and the mechanisms every product needs. No colors, typefaces or ground of its own: your product's look stays yours.",[165,198,199,204],{},[180,200,201],{},[183,202,203],{},"@zooui\u002Ftheme-forest",[180,205,188,206,209,210,212],{},[124,207,208],{},"Forest theme",": a layer that extends ",[183,211,185],{}," and adds Forest's colors, six accent schemes, Inter and JetBrains Mono, and the page ground. Extend this one layer to get both.",[109,214,216],{"id":215},"quick-start","Quick start",[114,218,219],{},"Extend the theme layer:",[221,222,228],"pre",{"className":223,"code":224,"filename":225,"language":226,"meta":227,"style":227},"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","",[183,229,230,254,282,303],{"__ignoreMap":227},[231,232,235,239,242,246,250],"span",{"class":233,"line":234},"line",1,[231,236,238],{"class":237},"sVHd0","export",[231,240,241],{"class":237}," default",[231,243,245],{"class":244},"sGLFI"," defineNuxtConfig",[231,247,249],{"class":248},"su5hD","(",[231,251,253],{"class":252},"sP7_E","{\n",[231,255,257,261,264,267,271,274,276,279],{"class":233,"line":256},2,[231,258,260],{"class":259},"skxfh","  extends",[231,262,263],{"class":252},":",[231,265,266],{"class":248}," [",[231,268,270],{"class":269},"sjJ54","'",[231,272,203],{"class":273},"s_sjI",[231,275,270],{"class":269},[231,277,278],{"class":248},"]",[231,280,281],{"class":252},",\n",[231,283,285,288,290,292,294,297,299,301],{"class":233,"line":284},3,[231,286,287],{"class":259},"  css",[231,289,263],{"class":252},[231,291,266],{"class":248},[231,293,270],{"class":269},[231,295,296],{"class":273},"~\u002Fassets\u002Fcss\u002Fmain.css",[231,298,270],{"class":269},[231,300,278],{"class":248},[231,302,281],{"class":252},[231,304,306,309],{"class":233,"line":305},4,[231,307,308],{"class":252},"}",[231,310,311],{"class":248},")\n",[114,313,314],{},"Make the layer's stylesheet the first line of your one CSS entry:",[221,316,321],{"className":317,"code":318,"filename":319,"language":320,"meta":227,"style":227},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","@import \"@zooui\u002Ftheme-forest\u002Fassets\u002Fcss\u002Fforest.css\";\n","app\u002Fassets\u002Fcss\u002Fmain.css","css",[183,322,323],{"__ignoreMap":227},[231,324,325,328,331,334,337],{"class":233,"line":234},[231,326,327],{"class":237},"@import",[231,329,330],{"class":269}," \"",[231,332,333],{"class":273},"@zooui\u002Ftheme-forest\u002Fassets\u002Fcss\u002Fforest.css",[231,335,336],{"class":269},"\"",[231,338,339],{"class":252},";\n",[114,341,342,343,346],{},"Wrap the app in Nuxt UI's ",[183,344,345],{},"UApp"," and use any component:",[221,348,353],{"className":349,"code":350,"filename":351,"language":352,"meta":227,"style":227},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003Ctemplate>\n  \u003CUApp>\n    \u003CZCard color=\"primary\">\n      \u003CZKicker>deployments\u003C\u002FZKicker>\n      \u003CZStatus state=\"healthy\" pill \u002F>\n    \u003C\u002FZCard>\n  \u003C\u002FUApp>\n\u003C\u002Ftemplate>\n","app\u002Fapp.vue","vue",[183,354,355,367,376,400,421,447,457,467],{"__ignoreMap":227},[231,356,357,360,364],{"class":233,"line":234},[231,358,359],{"class":252},"\u003C",[231,361,363],{"class":362},"sQzsp","template",[231,365,366],{"class":252},">\n",[231,368,369,372,374],{"class":233,"line":256},[231,370,371],{"class":252},"  \u003C",[231,373,345],{"class":362},[231,375,366],{"class":252},[231,377,378,381,384,388,391,393,396,398],{"class":233,"line":284},[231,379,380],{"class":252},"    \u003C",[231,382,383],{"class":362},"ZCard",[231,385,387],{"class":386},"s9AJx"," color",[231,389,390],{"class":252},"=",[231,392,336],{"class":269},[231,394,395],{"class":273},"primary",[231,397,336],{"class":269},[231,399,366],{"class":252},[231,401,402,405,408,411,414,417,419],{"class":233,"line":305},[231,403,404],{"class":252},"      \u003C",[231,406,407],{"class":362},"ZKicker",[231,409,410],{"class":252},">",[231,412,413],{"class":248},"deployments",[231,415,416],{"class":252},"\u003C\u002F",[231,418,407],{"class":362},[231,420,366],{"class":252},[231,422,424,426,429,432,434,436,439,441,444],{"class":233,"line":423},5,[231,425,404],{"class":252},[231,427,428],{"class":362},"ZStatus",[231,430,431],{"class":386}," state",[231,433,390],{"class":252},[231,435,336],{"class":269},[231,437,438],{"class":273},"healthy",[231,440,336],{"class":269},[231,442,443],{"class":386}," pill",[231,445,446],{"class":252}," \u002F>\n",[231,448,450,453,455],{"class":233,"line":449},6,[231,451,452],{"class":252},"    \u003C\u002F",[231,454,383],{"class":362},[231,456,366],{"class":252},[231,458,460,463,465],{"class":233,"line":459},7,[231,461,462],{"class":252},"  \u003C\u002F",[231,464,345],{"class":362},[231,466,366],{"class":252},[231,468,470,472,474],{"class":233,"line":469},8,[231,471,416],{"class":252},[231,473,363],{"class":362},[231,475,366],{"class":252},[114,477,188,478,482],{},[479,480,481],"a",{"href":12},"getting started guide"," covers the theme-free base, schemes and the versions you need.",[109,484,20],{"id":485},"components",[487,488],"component-gallery",{},[490,491,492],"style",{},"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 .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 .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":227,"searchDepth":284,"depth":284,"links":494},[495,496,497,498],{"id":111,"depth":256,"text":112},{"id":156,"depth":256,"text":157},{"id":215,"depth":256,"text":216},{"id":485,"depth":256,"text":20},null,"Zoo UI is a Nuxt layer over Nuxt UI. It keeps Nuxt UI's components, geometry and behavior exactly as they ship, adds the few components Nuxt UI has no equivalent of, and puts a look on top as a separate theme you opt into.","md",{},"\u002F",{"title":104,"description":500},"index","yoF47oHYPt-7yzkemadwOjmYnOn-_7Z_kN8fFAYUVdA",[508,511,515,519,523,527,531,534,538,542,546,550,554,558,561,565],{"path":30,"title":29,"description":509,"component":383,"preview":510},"Nuxt UI's UCard with a colored left edge.","CardParts",{"path":34,"title":33,"description":512,"component":513,"preview":514},"Zoo UI's code surface — near-black in both themes — for a command, a config or an inline value, with copy.","ZCodeBlock","CodeBlockVariants",{"path":38,"title":37,"description":516,"component":517,"preview":518},"A calendar-day field with typed entry, shortcut keys and a calendar picker, holding a Temporal.PlainDate.","ZDateField","DateFieldBasic",{"path":42,"title":41,"description":520,"component":521,"preview":522},"Nuxt UI's UDrawer with a colored top edge.","ZDrawer","DrawerEdge",{"path":46,"title":45,"description":524,"component":525,"preview":526},"A package manager as a two-letter mono tile, told apart by corner shape rather than brand color.","ZEcosystemMark","EcosystemMarkKnown",{"path":50,"title":49,"description":528,"component":529,"preview":530},"A value set in the mono face — a package name, a version, a hash — on a chip.","ZIdentifier","IdentifierKinds",{"path":54,"title":53,"description":532,"component":407,"preview":533},"The mono label over a section, bracketed in the primary or set as an eyebrow.","KickerBracket",{"path":58,"title":57,"description":535,"component":536,"preview":537},"Nuxt UI's UModal with a colored top edge.","ZModal","ModalEdge",{"path":62,"title":61,"description":539,"component":540,"preview":541},"One number input for money, percent, count and hours, formatting as you type, with unit marks that line up, steps that never snap, and a calculator mode.","ZNumberInput","NumberInputUnits",{"path":66,"title":65,"description":543,"component":544,"preview":545},"Usage against a limit, amber from the warning mark, red and hatched over the limit.","ZQuotaMeter","QuotaMeterLevels",{"path":70,"title":69,"description":547,"component":548,"preview":549},"An editor for a list of rows with the same few fields, with Add, Remove, folding, per-row errors and announcements.","ZRepeatingList","RepeatingListCompact",{"path":74,"title":73,"description":551,"component":552,"preview":553},"Nuxt UI's USlideover with a colored top edge.","ZSlideover","SlideoverEdge",{"path":78,"title":77,"description":555,"component":556,"preview":557},"Capacity as one named chip per slot, open or held, as a labeled list.","ZSlots","SlotsCapacity",{"path":82,"title":81,"description":559,"component":428,"preview":560},"A service's state by shape — circle, triangle, square, dashed ring, hollow ring — so it survives grayscale.","StatusPills",{"path":86,"title":85,"description":562,"component":563,"preview":564},"Light, dark or system as one segmented control, over Nuxt's color mode.","ZThemeToggle","ThemeToggleBasic",{"path":90,"title":89,"description":566,"component":567,"preview":568},"The shown-once moment for a new secret, with copy, a warning and an optional acknowledgment.","ZTokenReveal","TokenRevealAck",1794711775327]