[{"data":1,"prerenderedAt":1356},["ShallowReactive",2],{"navigation":3,"\u002Fgetting-started\u002Finstallation":60,"\u002Fgetting-started\u002Finstallation-surround":1351},[4,23,40,45,50,55],{"title":5,"path":6,"stem":7,"children":8,"icon":22},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,12,17],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles","i-lucide-rocket",{"title":24,"icon":25,"path":26,"stem":27,"children":28,"page":39},"Packages","i-lucide-package","\u002Fpackages","2.packages",[29,34],{"title":30,"path":31,"stem":32,"icon":33},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":35,"path":36,"stem":37,"icon":38},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":41,"path":42,"stem":43,"icon":44},"Theming","\u002Ftheming","3.theming","i-lucide-palette",{"title":46,"path":47,"stem":48,"icon":49},"Accessibility","\u002Faccessibility","4.accessibility","i-lucide-accessibility",{"title":51,"path":52,"stem":53,"icon":54},"i18n","\u002Fi18n","5.i18n","i-lucide-languages",{"title":56,"path":57,"stem":58,"icon":59},"Roadmap","\u002Froadmap","6.roadmap","i-lucide-map",{"id":61,"title":13,"body":62,"description":1344,"extension":1345,"links":1346,"meta":1347,"navigation":1348,"path":14,"seo":1349,"stem":15,"__hash__":1350},"docs\u002F1.getting-started\u002F2.installation.md",{"type":63,"value":64,"toc":1333},"minimark",[65,70,75,84,170,174,178,422,428,432,513,525,529,544,656,663,840,844,847,850,864,945,948,977,1029,1033,1065,1150,1245,1292,1315,1329],[66,67,69],"h2",{"id":68},"setup","Setup",[71,72,74],"h3",{"id":73},"add-to-a-vue-lynx-project","Add to a Vue-Lynx project",[76,77,79,80,83],"h4",{"id":78},"install-the-vyuicore-package","Install the ",[81,82,30],"code",{}," package",[85,86,87,112,126,140,155],"code-group",{},[88,89,95],"pre",{"className":90,"code":91,"filename":92,"language":93,"meta":94,"style":94},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @vyui\u002Fcore\n","pnpm","bash","",[81,96,97],{"__ignoreMap":94},[98,99,102,105,109],"span",{"class":100,"line":101},"line",1,[98,103,92],{"class":104},"sBMFI",[98,106,108],{"class":107},"sfazB"," add",[98,110,111],{"class":107}," @vyui\u002Fcore\n",[88,113,116],{"className":90,"code":114,"filename":115,"language":93,"meta":94,"style":94},"yarn add @vyui\u002Fcore\n","yarn",[81,117,118],{"__ignoreMap":94},[98,119,120,122,124],{"class":100,"line":101},[98,121,115],{"class":104},[98,123,108],{"class":107},[98,125,111],{"class":107},[88,127,130],{"className":90,"code":128,"filename":129,"language":93,"meta":94,"style":94},"bun add @vyui\u002Fcore\n","bun",[81,131,132],{"__ignoreMap":94},[98,133,134,136,138],{"class":100,"line":101},[98,135,129],{"class":104},[98,137,108],{"class":107},[98,139,111],{"class":107},[88,141,144],{"className":90,"code":142,"filename":143,"language":93,"meta":94,"style":94},"deno add npm:@vyui\u002Fcore\n","deno",[81,145,146],{"__ignoreMap":94},[98,147,148,150,152],{"class":100,"line":101},[98,149,143],{"class":104},[98,151,108],{"class":107},[98,153,154],{"class":107}," npm:@vyui\u002Fcore\n",[88,156,159],{"className":90,"code":157,"filename":158,"language":93,"meta":94,"style":94},"npm install @vyui\u002Fcore\n","npm",[81,160,161],{"__ignoreMap":94},[98,162,163,165,168],{"class":100,"line":101},[98,164,158],{"class":104},[98,166,167],{"class":107}," install",[98,169,111],{"class":107},[76,171,173],{"id":172},"use-a-primitive","Use a primitive",[175,176,177],"p",{},"Primitives are unstyled. Compose them with your own classes, tokens, or design system.",[88,179,184],{"className":180,"code":181,"filename":182,"language":183,"meta":94,"style":94},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { SliderRoot, SliderTrack, SliderRange, SliderThumb } from '@vyui\u002Fcore'\nimport { ref } from 'vue'\n\nconst value = ref(50)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSliderRoot v-model=\"value\" :max=\"100\">\n    \u003CSliderTrack>\n      \u003CSliderRange \u002F>\n    \u003C\u002FSliderTrack>\n    \u003CSliderThumb \u002F>\n  \u003C\u002FSliderRoot>\n\u003C\u002Ftemplate>\n","App.vue","vue",[81,185,186,203,247,267,274,299,309,314,324,360,371,383,393,403,413],{"__ignoreMap":94},[98,187,188,192,196,200],{"class":100,"line":101},[98,189,191],{"class":190},"sMK4o","\u003C",[98,193,195],{"class":194},"swJcz","script",[98,197,199],{"class":198},"spNyl"," setup",[98,201,202],{"class":190},">\n",[98,204,206,210,213,217,220,223,225,228,230,233,236,239,242,244],{"class":100,"line":205},2,[98,207,209],{"class":208},"s7zQu","import",[98,211,212],{"class":190}," {",[98,214,216],{"class":215},"sTEyZ"," SliderRoot",[98,218,219],{"class":190},",",[98,221,222],{"class":215}," SliderTrack",[98,224,219],{"class":190},[98,226,227],{"class":215}," SliderRange",[98,229,219],{"class":190},[98,231,232],{"class":215}," SliderThumb",[98,234,235],{"class":190}," }",[98,237,238],{"class":208}," from",[98,240,241],{"class":190}," '",[98,243,30],{"class":107},[98,245,246],{"class":190},"'\n",[98,248,250,252,254,257,259,261,263,265],{"class":100,"line":249},3,[98,251,209],{"class":208},[98,253,212],{"class":190},[98,255,256],{"class":215}," ref",[98,258,235],{"class":190},[98,260,238],{"class":208},[98,262,241],{"class":190},[98,264,183],{"class":107},[98,266,246],{"class":190},[98,268,270],{"class":100,"line":269},4,[98,271,273],{"emptyLinePlaceholder":272},true,"\n",[98,275,277,280,283,286,289,292,296],{"class":100,"line":276},5,[98,278,279],{"class":198},"const",[98,281,282],{"class":215}," value ",[98,284,285],{"class":190},"=",[98,287,256],{"class":288},"s2Zo4",[98,290,291],{"class":215},"(",[98,293,295],{"class":294},"sbssI","50",[98,297,298],{"class":215},")\n",[98,300,302,305,307],{"class":100,"line":301},6,[98,303,304],{"class":190},"\u003C\u002F",[98,306,195],{"class":194},[98,308,202],{"class":190},[98,310,312],{"class":100,"line":311},7,[98,313,273],{"emptyLinePlaceholder":272},[98,315,317,319,322],{"class":100,"line":316},8,[98,318,191],{"class":190},[98,320,321],{"class":194},"template",[98,323,202],{"class":190},[98,325,327,330,333,336,338,341,344,346,349,351,353,356,358],{"class":100,"line":326},9,[98,328,329],{"class":190},"  \u003C",[98,331,332],{"class":194},"SliderRoot",[98,334,335],{"class":198}," v-model",[98,337,285],{"class":190},[98,339,340],{"class":190},"\"",[98,342,343],{"class":107},"value",[98,345,340],{"class":190},[98,347,348],{"class":198}," :max",[98,350,285],{"class":190},[98,352,340],{"class":190},[98,354,355],{"class":107},"100",[98,357,340],{"class":190},[98,359,202],{"class":190},[98,361,363,366,369],{"class":100,"line":362},10,[98,364,365],{"class":190},"    \u003C",[98,367,368],{"class":194},"SliderTrack",[98,370,202],{"class":190},[98,372,374,377,380],{"class":100,"line":373},11,[98,375,376],{"class":190},"      \u003C",[98,378,379],{"class":194},"SliderRange",[98,381,382],{"class":190}," \u002F>\n",[98,384,386,389,391],{"class":100,"line":385},12,[98,387,388],{"class":190},"    \u003C\u002F",[98,390,368],{"class":194},[98,392,202],{"class":190},[98,394,396,398,401],{"class":100,"line":395},13,[98,397,365],{"class":190},[98,399,400],{"class":194},"SliderThumb",[98,402,382],{"class":190},[98,404,406,409,411],{"class":100,"line":405},14,[98,407,408],{"class":190},"  \u003C\u002F",[98,410,332],{"class":194},[98,412,202],{"class":190},[98,414,416,418,420],{"class":100,"line":415},15,[98,417,304],{"class":190},[98,419,321],{"class":194},[98,421,202],{"class":190},[71,423,425,426],{"id":424},"add-styled-components-with-vyuikit","Add styled components with ",[81,427,35],{},[76,429,431],{"id":430},"install-both-packages","Install both packages",[85,433,434,451,466,481,498],{},[88,435,437],{"className":90,"code":436,"filename":92,"language":93,"meta":94,"style":94},"pnpm add @vyui\u002Fcore @vyui\u002Fkit\n",[81,438,439],{"__ignoreMap":94},[98,440,441,443,445,448],{"class":100,"line":101},[98,442,92],{"class":104},[98,444,108],{"class":107},[98,446,447],{"class":107}," @vyui\u002Fcore",[98,449,450],{"class":107}," @vyui\u002Fkit\n",[88,452,454],{"className":90,"code":453,"filename":115,"language":93,"meta":94,"style":94},"yarn add @vyui\u002Fcore @vyui\u002Fkit\n",[81,455,456],{"__ignoreMap":94},[98,457,458,460,462,464],{"class":100,"line":101},[98,459,115],{"class":104},[98,461,108],{"class":107},[98,463,447],{"class":107},[98,465,450],{"class":107},[88,467,469],{"className":90,"code":468,"filename":129,"language":93,"meta":94,"style":94},"bun add @vyui\u002Fcore @vyui\u002Fkit\n",[81,470,471],{"__ignoreMap":94},[98,472,473,475,477,479],{"class":100,"line":101},[98,474,129],{"class":104},[98,476,108],{"class":107},[98,478,447],{"class":107},[98,480,450],{"class":107},[88,482,484],{"className":90,"code":483,"filename":143,"language":93,"meta":94,"style":94},"deno add npm:@vyui\u002Fcore npm:@vyui\u002Fkit\n",[81,485,486],{"__ignoreMap":94},[98,487,488,490,492,495],{"class":100,"line":101},[98,489,143],{"class":104},[98,491,108],{"class":107},[98,493,494],{"class":107}," npm:@vyui\u002Fcore",[98,496,497],{"class":107}," npm:@vyui\u002Fkit\n",[88,499,501],{"className":90,"code":500,"filename":158,"language":93,"meta":94,"style":94},"npm install @vyui\u002Fcore @vyui\u002Fkit\n",[81,502,503],{"__ignoreMap":94},[98,504,505,507,509,511],{"class":100,"line":101},[98,506,158],{"class":104},[98,508,167],{"class":107},[98,510,447],{"class":107},[98,512,450],{"class":107},[175,514,515,517,518,520,521,524],{},[81,516,35],{}," re-exports everything from ",[81,519,30],{},", so you can mix ",[81,522,523],{},"Vy*"," styled components with raw primitives in the same file.",[76,526,528],{"id":527},"register-the-kit-plugin","Register the kit plugin",[175,530,531,532,535,536,539,540,543],{},"Add ",[81,533,534],{},"VyUI"," to your app entry once. This installs the theme, registers components, and wires up portals for ",[81,537,538],{},"VyModal"," \u002F ",[81,541,542],{},"VyToast",".",[88,545,550],{"className":546,"code":547,"filename":548,"language":549,"meta":94,"style":94},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createApp } from '@lynx-js\u002Fvue'\nimport { VyUI } from '@vyui\u002Fkit'\nimport '@vyui\u002Fkit\u002Fstyle.css'\nimport App from '.\u002FApp.vue'\n\ncreateApp(App).use(VyUI).mount('#app')\n","src\u002Findex.ts","ts",[81,551,552,572,591,602,619,623],{"__ignoreMap":94},[98,553,554,556,558,561,563,565,567,570],{"class":100,"line":101},[98,555,209],{"class":208},[98,557,212],{"class":190},[98,559,560],{"class":215}," createApp",[98,562,235],{"class":190},[98,564,238],{"class":208},[98,566,241],{"class":190},[98,568,569],{"class":107},"@lynx-js\u002Fvue",[98,571,246],{"class":190},[98,573,574,576,578,581,583,585,587,589],{"class":100,"line":205},[98,575,209],{"class":208},[98,577,212],{"class":190},[98,579,580],{"class":215}," VyUI",[98,582,235],{"class":190},[98,584,238],{"class":208},[98,586,241],{"class":190},[98,588,35],{"class":107},[98,590,246],{"class":190},[98,592,593,595,597,600],{"class":100,"line":249},[98,594,209],{"class":208},[98,596,241],{"class":190},[98,598,599],{"class":107},"@vyui\u002Fkit\u002Fstyle.css",[98,601,246],{"class":190},[98,603,604,606,609,612,614,617],{"class":100,"line":269},[98,605,209],{"class":208},[98,607,608],{"class":215}," App ",[98,610,611],{"class":208},"from",[98,613,241],{"class":190},[98,615,616],{"class":107},".\u002FApp.vue",[98,618,246],{"class":190},[98,620,621],{"class":100,"line":276},[98,622,273],{"emptyLinePlaceholder":272},[98,624,625,628,631,633,636,639,641,644,646,649,652,654],{"class":100,"line":301},[98,626,627],{"class":288},"createApp",[98,629,630],{"class":215},"(App)",[98,632,543],{"class":190},[98,634,635],{"class":288},"use",[98,637,638],{"class":215},"(VyUI)",[98,640,543],{"class":190},[98,642,643],{"class":288},"mount",[98,645,291],{"class":215},[98,647,648],{"class":190},"'",[98,650,651],{"class":107},"#app",[98,653,648],{"class":190},[98,655,298],{"class":215},[76,657,659,660,662],{"id":658},"use-a-vy-component","Use a ",[81,661,523],{}," component",[88,664,666],{"className":180,"code":665,"filename":182,"language":183,"meta":94,"style":94},"\u003Cscript setup>\nimport { VyButton, VySlider } from '@vyui\u002Fkit'\nimport { ref } from 'vue'\n\nconst value = ref(50)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVySlider v-model=\"value\" :max=\"100\" \u002F>\n  \u003CVyButton variant=\"solid\" color=\"primary\">Save\u003C\u002FVyButton>\n\u003C\u002Ftemplate>\n",[81,667,668,678,702,720,724,740,748,752,760,789,832],{"__ignoreMap":94},[98,669,670,672,674,676],{"class":100,"line":101},[98,671,191],{"class":190},[98,673,195],{"class":194},[98,675,199],{"class":198},[98,677,202],{"class":190},[98,679,680,682,684,687,689,692,694,696,698,700],{"class":100,"line":205},[98,681,209],{"class":208},[98,683,212],{"class":190},[98,685,686],{"class":215}," VyButton",[98,688,219],{"class":190},[98,690,691],{"class":215}," VySlider",[98,693,235],{"class":190},[98,695,238],{"class":208},[98,697,241],{"class":190},[98,699,35],{"class":107},[98,701,246],{"class":190},[98,703,704,706,708,710,712,714,716,718],{"class":100,"line":249},[98,705,209],{"class":208},[98,707,212],{"class":190},[98,709,256],{"class":215},[98,711,235],{"class":190},[98,713,238],{"class":208},[98,715,241],{"class":190},[98,717,183],{"class":107},[98,719,246],{"class":190},[98,721,722],{"class":100,"line":269},[98,723,273],{"emptyLinePlaceholder":272},[98,725,726,728,730,732,734,736,738],{"class":100,"line":276},[98,727,279],{"class":198},[98,729,282],{"class":215},[98,731,285],{"class":190},[98,733,256],{"class":288},[98,735,291],{"class":215},[98,737,295],{"class":294},[98,739,298],{"class":215},[98,741,742,744,746],{"class":100,"line":301},[98,743,304],{"class":190},[98,745,195],{"class":194},[98,747,202],{"class":190},[98,749,750],{"class":100,"line":311},[98,751,273],{"emptyLinePlaceholder":272},[98,753,754,756,758],{"class":100,"line":316},[98,755,191],{"class":190},[98,757,321],{"class":194},[98,759,202],{"class":190},[98,761,762,764,767,769,771,773,775,777,779,781,783,785,787],{"class":100,"line":326},[98,763,329],{"class":190},[98,765,766],{"class":194},"VySlider",[98,768,335],{"class":198},[98,770,285],{"class":190},[98,772,340],{"class":190},[98,774,343],{"class":107},[98,776,340],{"class":190},[98,778,348],{"class":198},[98,780,285],{"class":190},[98,782,340],{"class":190},[98,784,355],{"class":107},[98,786,340],{"class":190},[98,788,382],{"class":190},[98,790,791,793,796,799,801,803,806,808,811,813,815,818,820,823,826,828,830],{"class":100,"line":362},[98,792,329],{"class":190},[98,794,795],{"class":194},"VyButton",[98,797,798],{"class":198}," variant",[98,800,285],{"class":190},[98,802,340],{"class":190},[98,804,805],{"class":107},"solid",[98,807,340],{"class":190},[98,809,810],{"class":198}," color",[98,812,285],{"class":190},[98,814,340],{"class":190},[98,816,817],{"class":107},"primary",[98,819,340],{"class":190},[98,821,822],{"class":190},">",[98,824,825],{"class":215},"Save",[98,827,304],{"class":190},[98,829,795],{"class":194},[98,831,202],{"class":190},[98,833,834,836,838],{"class":100,"line":373},[98,835,304],{"class":190},[98,837,321],{"class":194},[98,839,202],{"class":190},[66,841,843],{"id":842},"options","Options",[175,845,846],{},"Kit ships sensible defaults — you only need to reach for these when you want to override theme tokens, swap a primary color, or change a component's default variant.",[71,848,849],{"id":849},"theme",[175,851,852,853,856,857,859,860,863],{},"Pass component overrides under ",[81,854,855],{},"ui.\u003Ccomponent>"," to deep-merge them into the default Tailwind Variants theme. Every ",[81,858,523],{}," component reads from this — no rebuild required. Like Nuxt UI, everything lives under the single ",[81,861,862],{},"ui"," namespace.",[88,865,867],{"className":546,"code":866,"filename":548,"language":549,"meta":94,"style":94},"createApp(App).use(VyUI, {\n  ui: {\n    button: {\n      defaultVariants: { color: 'primary' },\n    },\n  },\n})\n",[81,868,869,887,897,906,928,933,938],{"__ignoreMap":94},[98,870,871,873,875,877,879,882,884],{"class":100,"line":101},[98,872,627],{"class":288},[98,874,630],{"class":215},[98,876,543],{"class":190},[98,878,635],{"class":288},[98,880,881],{"class":215},"(VyUI",[98,883,219],{"class":190},[98,885,886],{"class":190}," {\n",[98,888,889,892,895],{"class":100,"line":205},[98,890,891],{"class":194},"  ui",[98,893,894],{"class":190},":",[98,896,886],{"class":190},[98,898,899,902,904],{"class":100,"line":249},[98,900,901],{"class":194},"    button",[98,903,894],{"class":190},[98,905,886],{"class":190},[98,907,908,911,913,915,917,919,921,923,925],{"class":100,"line":269},[98,909,910],{"class":194},"      defaultVariants",[98,912,894],{"class":190},[98,914,212],{"class":190},[98,916,810],{"class":194},[98,918,894],{"class":190},[98,920,241],{"class":190},[98,922,817],{"class":107},[98,924,648],{"class":190},[98,926,927],{"class":190}," },\n",[98,929,930],{"class":100,"line":276},[98,931,932],{"class":190},"    },\n",[98,934,935],{"class":100,"line":301},[98,936,937],{"class":190},"  },\n",[98,939,940,943],{"class":100,"line":311},[98,941,942],{"class":190},"}",[98,944,298],{"class":215},[71,946,947],{"id":947},"colors",[175,949,950,951,953,954,953,957,953,960,953,963,953,966,953,969,972,973,976],{},"Override the semantic color slots (",[81,952,817],{},", ",[81,955,956],{},"secondary",[81,958,959],{},"success",[81,961,962],{},"info",[81,964,965],{},"warning",[81,967,968],{},"error",[81,970,971],{},"neutral",") by redefining the ",[81,974,975],{},"--ui-color-{semantic}-{shade}"," CSS variables in your own stylesheet.",[88,978,983],{"className":979,"code":980,"filename":981,"language":982,"meta":94,"style":94},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  --ui-color-primary-500: #6366f1;\n  --ui-color-primary-600: #4f46e5;\n}\n","src\u002Fapp.css","css",[81,984,985,994,1010,1024],{"__ignoreMap":94},[98,986,987,989,992],{"class":100,"line":101},[98,988,894],{"class":190},[98,990,991],{"class":198},"root",[98,993,886],{"class":190},[98,995,996,999,1001,1004,1007],{"class":100,"line":205},[98,997,998],{"class":215},"  --ui-color-primary-500",[98,1000,894],{"class":190},[98,1002,1003],{"class":190}," #",[98,1005,1006],{"class":215},"6366f1",[98,1008,1009],{"class":190},";\n",[98,1011,1012,1015,1017,1019,1022],{"class":100,"line":249},[98,1013,1014],{"class":215},"  --ui-color-primary-600",[98,1016,894],{"class":190},[98,1018,1003],{"class":190},[98,1020,1021],{"class":215},"4f46e5",[98,1023,1009],{"class":190},[98,1025,1026],{"class":100,"line":269},[98,1027,1028],{"class":190},"}\n",[76,1030,1032],{"id":1031},"adding-a-custom-color","Adding a custom color",[175,1034,1035,1036,953,1038,953,1040,953,1042,953,1044,953,1046,1048,1049,1051,1052,1055,1056,1060,1061,1064],{},"The configurable color set (",[81,1037,817],{},[81,1039,956],{},[81,1041,959],{},[81,1043,962],{},[81,1045,965],{},[81,1047,968],{}," — ",[81,1050,971],{}," is always appended) is extensible. To add a color (e.g. ",[81,1053,1054],{},"tertiary",") so it works at runtime ",[1057,1058,1059],"em",{},"and"," type-checks on every component's ",[81,1062,1063],{},"color"," prop:",[88,1066,1068],{"className":546,"code":1067,"filename":548,"language":549,"meta":94,"style":94},"import { VyUI, COLORS } from '@vyui\u002Fkit'\n\napp.use(VyUI, { ui: { colors: [...COLORS, 'tertiary'] } })\n",[81,1069,1070,1093,1097],{"__ignoreMap":94},[98,1071,1072,1074,1076,1078,1080,1083,1085,1087,1089,1091],{"class":100,"line":101},[98,1073,209],{"class":208},[98,1075,212],{"class":190},[98,1077,580],{"class":215},[98,1079,219],{"class":190},[98,1081,1082],{"class":215}," COLORS",[98,1084,235],{"class":190},[98,1086,238],{"class":208},[98,1088,241],{"class":190},[98,1090,35],{"class":107},[98,1092,246],{"class":190},[98,1094,1095],{"class":100,"line":205},[98,1096,273],{"emptyLinePlaceholder":272},[98,1098,1099,1102,1104,1106,1108,1110,1112,1115,1117,1119,1122,1124,1127,1130,1133,1135,1137,1139,1141,1144,1146,1148],{"class":100,"line":249},[98,1100,1101],{"class":215},"app",[98,1103,543],{"class":190},[98,1105,635],{"class":288},[98,1107,881],{"class":215},[98,1109,219],{"class":190},[98,1111,212],{"class":190},[98,1113,1114],{"class":194}," ui",[98,1116,894],{"class":190},[98,1118,212],{"class":190},[98,1120,1121],{"class":194}," colors",[98,1123,894],{"class":190},[98,1125,1126],{"class":215}," [",[98,1128,1129],{"class":190},"...",[98,1131,1132],{"class":215},"COLORS",[98,1134,219],{"class":190},[98,1136,241],{"class":190},[98,1138,1054],{"class":107},[98,1140,648],{"class":190},[98,1142,1143],{"class":215},"] ",[98,1145,942],{"class":190},[98,1147,235],{"class":190},[98,1149,298],{"class":215},[88,1151,1154],{"className":546,"code":1152,"filename":1153,"language":549,"meta":94,"style":94},"import { createVyuiPreset, COLORS } from '@vyui\u002Fkit\u002Ftailwind'\n\nexport default {\n  presets: [lynxPreset, createVyuiPreset({ colors: [...COLORS, 'tertiary'] })],\n}\n","tailwind.config.ts",[81,1155,1156,1180,1184,1194,1241],{"__ignoreMap":94},[98,1157,1158,1160,1162,1165,1167,1169,1171,1173,1175,1178],{"class":100,"line":101},[98,1159,209],{"class":208},[98,1161,212],{"class":190},[98,1163,1164],{"class":215}," createVyuiPreset",[98,1166,219],{"class":190},[98,1168,1082],{"class":215},[98,1170,235],{"class":190},[98,1172,238],{"class":208},[98,1174,241],{"class":190},[98,1176,1177],{"class":107},"@vyui\u002Fkit\u002Ftailwind",[98,1179,246],{"class":190},[98,1181,1182],{"class":100,"line":205},[98,1183,273],{"emptyLinePlaceholder":272},[98,1185,1186,1189,1192],{"class":100,"line":249},[98,1187,1188],{"class":208},"export",[98,1190,1191],{"class":208}," default",[98,1193,886],{"class":190},[98,1195,1196,1199,1201,1204,1206,1208,1210,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1238],{"class":100,"line":269},[98,1197,1198],{"class":194},"  presets",[98,1200,894],{"class":190},[98,1202,1203],{"class":215}," [lynxPreset",[98,1205,219],{"class":190},[98,1207,1164],{"class":288},[98,1209,291],{"class":215},[98,1211,1212],{"class":190},"{",[98,1214,1121],{"class":194},[98,1216,894],{"class":190},[98,1218,1126],{"class":215},[98,1220,1129],{"class":190},[98,1222,1132],{"class":215},[98,1224,219],{"class":190},[98,1226,241],{"class":190},[98,1228,1054],{"class":107},[98,1230,648],{"class":190},[98,1232,1143],{"class":215},[98,1234,942],{"class":190},[98,1236,1237],{"class":215},")]",[98,1239,1240],{"class":190},",\n",[98,1242,1243],{"class":100,"line":276},[98,1244,1028],{"class":190},[88,1246,1249],{"className":546,"code":1247,"filename":1248,"language":549,"meta":94,"style":94},"declare module '@vyui\u002Fkit' {\n  interface VyuiColorRegistry { tertiary: true }\n}\n","vyui-colors.d.ts",[81,1250,1251,1267,1288],{"__ignoreMap":94},[98,1252,1253,1256,1259,1261,1263,1265],{"class":100,"line":101},[98,1254,1255],{"class":198},"declare",[98,1257,1258],{"class":198}," module",[98,1260,241],{"class":190},[98,1262,35],{"class":107},[98,1264,648],{"class":190},[98,1266,886],{"class":190},[98,1268,1269,1272,1275,1277,1280,1282,1285],{"class":100,"line":205},[98,1270,1271],{"class":198},"  interface",[98,1273,1274],{"class":104}," VyuiColorRegistry",[98,1276,212],{"class":190},[98,1278,1279],{"class":194}," tertiary",[98,1281,894],{"class":190},[98,1283,1284],{"class":104}," true",[98,1286,1287],{"class":190}," }\n",[98,1289,1290],{"class":100,"line":249},[98,1291,1028],{"class":190},[175,1293,1294,1295,1298,1299,1302,1303,1306,1307,1314],{},"Then add the ",[81,1296,1297],{},"--ui-color-tertiary-{50..950}"," CSS-var block (the ",[81,1300,1301],{},".d.ts"," + CSS can be generated with ",[81,1304,1305],{},"node node_modules\u002F@vyui\u002Fkit\u002Fscripts\u002Fgen-colors.mjs --colors tertiary=indigo","). See the ",[1308,1309,1313],"a",{"href":1310,"rel":1311},"https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Ftree\u002Fmain\u002Fpackages\u002Fkit#adding-a-custom-color",[1312],"nofollow","@vyui\u002Fkit README"," for the full flow.",[1316,1317,1319],"callout",{"icon":1318},"i-lucide-info",[175,1320,1321,1322,1325,1326,543],{},"A more ergonomic CLI flow — ",[81,1323,1324],{},"npx @vyui add \u003Ccomponent>"," shadcn-style, plus a hosted registry — is on the ",[1308,1327,1328],{"href":57},"roadmap",[1330,1331,1332],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":94,"searchDepth":101,"depth":205,"links":1334},[1335,1340],{"id":68,"depth":205,"text":69,"children":1336},[1337,1338],{"id":73,"depth":249,"text":74},{"id":424,"depth":249,"text":1339},"Add styled components with @vyui\u002Fkit",{"id":842,"depth":205,"text":843,"children":1341},[1342,1343],{"id":849,"depth":249,"text":849},{"id":947,"depth":249,"text":947},"Install @vyui\u002Fcore and @vyui\u002Fkit into a Vue-Lynx app.","md",null,{},{"icon":16},{"title":13,"description":1344},"Ue465qKVubC1rjFfSM-Rj9WeTu93GjjQP4FzOmOaCs8",[1352,1354],{"title":10,"path":6,"stem":7,"description":1353,"icon":11,"children":-1},"What Vy UI is, how the two-layer architecture works, and why Vue-Lynx needs its own component library.",{"title":18,"path":19,"stem":20,"description":1355,"icon":21,"children":-1},"Bring your own icon set via Iconify.",1780388088856]