[{"data":1,"prerenderedAt":1124},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-usage":273,"-colorffy-ui-usage-surround":1119},[4,21,115],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Colorffy CSS","i-lucide-palette","\u002Fcolorffy-css","2.colorffy-css",[27,32,37,42,78,99],{"title":28,"path":29,"stem":30,"icon":31},"Overview","\u002Fcolorffy-css\u002Foverview","2.colorffy-css\u002F1.overview","i-lucide-book-open",{"title":33,"path":34,"stem":35,"icon":36},"Color System","\u002Fcolorffy-css\u002Fcolor-system","2.colorffy-css\u002F2.color-system","i-lucide-droplet",{"title":38,"path":39,"stem":40,"icon":41},"Customization","\u002Fcolorffy-css\u002Fcustomization","2.colorffy-css\u002F3.customization","i-lucide-settings",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"Utilities","i-lucide-wrench","\u002Fcolorffy-css\u002Futilities","2.colorffy-css\u002F4.utilities",[48,53,58,63,68,73],{"title":49,"path":50,"stem":51,"icon":52},"Borders & Shadows","\u002Fcolorffy-css\u002Futilities\u002Fborders-shadows","2.colorffy-css\u002F4.utilities\u002F01.borders-shadows","i-lucide-frame",{"title":54,"path":55,"stem":56,"icon":57},"Colors & Gradients","\u002Fcolorffy-css\u002Futilities\u002Fcolors-gradients","2.colorffy-css\u002F4.utilities\u002F02.colors-gradients","i-lucide-paint-bucket",{"title":59,"path":60,"stem":61,"icon":62},"Display & Flexbox","\u002Fcolorffy-css\u002Futilities\u002Fdisplay-flexbox","2.colorffy-css\u002F4.utilities\u002F03.display-flexbox","i-lucide-stretch-horizontal",{"title":64,"path":65,"stem":66,"icon":67},"Effects","\u002Fcolorffy-css\u002Futilities\u002Feffects","2.colorffy-css\u002F4.utilities\u002F04.effects","i-lucide-wand-sparkles",{"title":69,"path":70,"stem":71,"icon":72},"Spacing","\u002Fcolorffy-css\u002Futilities\u002Fspacing","2.colorffy-css\u002F4.utilities\u002F05.spacing","i-lucide-ruler",{"title":74,"path":75,"stem":76,"icon":77},"Typography","\u002Fcolorffy-css\u002Futilities\u002Ftypography","2.colorffy-css\u002F4.utilities\u002F06.typography","i-lucide-type",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":20},"Layout","i-lucide-layout-template","\u002Fcolorffy-css\u002Flayout","2.colorffy-css\u002F5.layout",[84,89,94],{"title":85,"path":86,"stem":87,"icon":88},"App Layout","\u002Fcolorffy-css\u002Flayout\u002Fapp-layout","2.colorffy-css\u002F5.layout\u002F01.app-layout","i-lucide-app-window",{"title":90,"path":91,"stem":92,"icon":93},"Flex Grid","\u002Fcolorffy-css\u002Flayout\u002Fflex-grid","2.colorffy-css\u002F5.layout\u002F02.flex-grid","i-lucide-columns-3",{"title":95,"path":96,"stem":97,"icon":98},"Grid","\u002Fcolorffy-css\u002Flayout\u002Fgrid","2.colorffy-css\u002F5.layout\u002F03.grid","i-lucide-grid-3x3",{"title":100,"icon":101,"path":102,"stem":103,"children":104,"page":20},"SCSS API","i-lucide-braces","\u002Fcolorffy-css\u002Fscss-api","2.colorffy-css\u002F6.scss-api",[105,110],{"title":106,"path":107,"stem":108,"icon":109},"Mixins","\u002Fcolorffy-css\u002Fscss-api\u002Fmixins","2.colorffy-css\u002F6.scss-api\u002F01.mixins","i-lucide-code",{"title":111,"path":112,"stem":113,"icon":114},"Tonal Tokens","\u002Fcolorffy-css\u002Fscss-api\u002Ftonal-tokens","2.colorffy-css\u002F6.scss-api\u002F02.tonal-tokens","i-lucide-swatch-book",{"title":116,"icon":117,"path":118,"stem":119,"children":120,"page":20},"Colorffy UI","i-lucide-blocks","\u002Fcolorffy-ui","3.colorffy-ui",[121,125,268],{"title":122,"path":123,"stem":124,"icon":31},"Usage","\u002Fcolorffy-ui\u002Fusage","3.colorffy-ui\u002F1.usage",{"title":126,"icon":127,"path":128,"stem":129,"children":130,"page":20},"Components","i-lucide-component","\u002Fcolorffy-ui\u002Fcomponents","3.colorffy-ui\u002F2.components",[131,135,140,145,150,155,160,165,170,175,180,185,190,195,200,204,209,214,218,223,228,233,238,243,248,253,258,263],{"title":28,"path":132,"stem":133,"icon":134},"\u002Fcolorffy-ui\u002Fcomponents\u002Foverview","3.colorffy-ui\u002F2.components\u002F00.overview","i-lucide-layout-grid",{"title":136,"path":137,"stem":138,"icon":139},"Accordion","\u002Fcolorffy-ui\u002Fcomponents\u002Faccordion","3.colorffy-ui\u002F2.components\u002F01.accordion","i-lucide-chevrons-down-up",{"title":141,"path":142,"stem":143,"icon":144},"Alert","\u002Fcolorffy-ui\u002Fcomponents\u002Falert","3.colorffy-ui\u002F2.components\u002F02.alert","i-lucide-triangle-alert",{"title":146,"path":147,"stem":148,"icon":149},"Avatar","\u002Fcolorffy-ui\u002Fcomponents\u002Favatar","3.colorffy-ui\u002F2.components\u002F03.avatar","i-lucide-circle-user",{"title":151,"path":152,"stem":153,"icon":154},"Badge","\u002Fcolorffy-ui\u002Fcomponents\u002Fbadge","3.colorffy-ui\u002F2.components\u002F04.badge","i-lucide-tag",{"title":156,"path":157,"stem":158,"icon":159},"Breadcrumb","\u002Fcolorffy-ui\u002Fcomponents\u002Fbreadcrumb","3.colorffy-ui\u002F2.components\u002F05.breadcrumb","i-lucide-chevron-right",{"title":161,"path":162,"stem":163,"icon":164},"Button","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton","3.colorffy-ui\u002F2.components\u002F06.button","i-lucide-square-mouse-pointer",{"title":166,"path":167,"stem":168,"icon":169},"Button Group","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-group","3.colorffy-ui\u002F2.components\u002F07.button-group","i-lucide-square-stack",{"title":171,"path":172,"stem":173,"icon":174},"Button Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu","3.colorffy-ui\u002F2.components\u002F08.button-menu","i-lucide-menu",{"title":176,"path":177,"stem":178,"icon":179},"Card","\u002Fcolorffy-ui\u002Fcomponents\u002Fcard","3.colorffy-ui\u002F2.components\u002F09.card","i-lucide-square",{"title":181,"path":182,"stem":183,"icon":184},"Datatable","\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable","3.colorffy-ui\u002F2.components\u002F10.datatable","i-lucide-table",{"title":186,"path":187,"stem":188,"icon":189},"Empty","\u002Fcolorffy-ui\u002Fcomponents\u002Fempty","3.colorffy-ui\u002F2.components\u002F11.empty","i-lucide-inbox",{"title":191,"path":192,"stem":193,"icon":194},"Icons","\u002Fcolorffy-ui\u002Fcomponents\u002Ficons","3.colorffy-ui\u002F2.components\u002F12.icons","i-lucide-shapes",{"title":196,"path":197,"stem":198,"icon":199},"Inputs","\u002Fcolorffy-ui\u002Fcomponents\u002Finputs","3.colorffy-ui\u002F2.components\u002F13.inputs","i-lucide-text-cursor-input",{"title":79,"path":201,"stem":202,"icon":203},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout","3.colorffy-ui\u002F2.components\u002F14.layout","i-lucide-layout",{"title":205,"path":206,"stem":207,"icon":208},"List","\u002Fcolorffy-ui\u002Fcomponents\u002Flist","3.colorffy-ui\u002F2.components\u002F15.list","i-lucide-list",{"title":210,"path":211,"stem":212,"icon":213},"Loading","\u002Fcolorffy-ui\u002Fcomponents\u002Floading","3.colorffy-ui\u002F2.components\u002F16.loading","i-lucide-loader-circle",{"title":215,"path":216,"stem":217,"icon":88},"Modal","\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal","3.colorffy-ui\u002F2.components\u002F17.modal",{"title":219,"path":220,"stem":221,"icon":222},"Navbar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar","3.colorffy-ui\u002F2.components\u002F18.navbar","i-lucide-panel-top",{"title":224,"path":225,"stem":226,"icon":227},"Navigation Bar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar","3.colorffy-ui\u002F2.components\u002F19.navigation-bar","i-lucide-navigation",{"title":229,"path":230,"stem":231,"icon":232},"Popover","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover","3.colorffy-ui\u002F2.components\u002F20.popover","i-lucide-message-square",{"title":234,"path":235,"stem":236,"icon":237},"Popover Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu","3.colorffy-ui\u002F2.components\u002F21.popover-menu","i-lucide-ellipsis",{"title":239,"path":240,"stem":241,"icon":242},"Progress","\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress","3.colorffy-ui\u002F2.components\u002F22.progress","i-lucide-loader",{"title":244,"path":245,"stem":246,"icon":247},"Segmented Controls","\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls","3.colorffy-ui\u002F2.components\u002F23.segmented-controls","i-lucide-toggle-left",{"title":249,"path":250,"stem":251,"icon":252},"Sidebar","\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar","3.colorffy-ui\u002F2.components\u002F24.sidebar","i-lucide-panel-left",{"title":254,"path":255,"stem":256,"icon":257},"Skeleton","\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton","3.colorffy-ui\u002F2.components\u002F25.skeleton","i-lucide-square-dashed",{"title":259,"path":260,"stem":261,"icon":262},"Tabs","\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs","3.colorffy-ui\u002F2.components\u002F26.tabs","i-lucide-panels-top-left",{"title":264,"path":265,"stem":266,"icon":267},"Tooltip","\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip","3.colorffy-ui\u002F2.components\u002F27.tooltip","i-lucide-message-circle",{"title":269,"path":270,"stem":271,"icon":272},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"id":274,"title":122,"body":275,"description":1112,"extension":1113,"links":1114,"meta":1115,"navigation":1116,"path":123,"seo":1117,"stem":124,"__hash__":1118},"docs\u002F3.colorffy-ui\u002F1.usage.md",{"type":276,"value":277,"toc":1103},"minimark",[278,289,294,417,420,561,565,733,737,817,822,923,927,1022,1026,1099],[279,280,281,288],"p",{},[282,283,287],"a",{"href":284,"rel":285},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@colorffy\u002Fui",[286],"nofollow","@colorffy\u002Fui"," gives you 70+ headless Vue 3 components. Register them all globally, or import only what you need.",[290,291,293],"h2",{"id":292},"register-globally-vue-3","Register globally (Vue 3)",[295,296,302],"pre",{"className":297,"code":298,"filename":299,"language":300,"meta":301,"style":301},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import ColorffyUI from '@colorffy\u002Fui'\nimport { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\n\ncreateApp(App).use(ColorffyUI).mount('#app')\n","main.ts","ts","",[303,304,305,331,355,372,379],"code",{"__ignoreMap":301},[306,307,310,314,318,321,325,328],"span",{"class":308,"line":309},"line",1,[306,311,313],{"class":312},"s7zQu","import",[306,315,317],{"class":316},"sTEyZ"," ColorffyUI ",[306,319,320],{"class":312},"from",[306,322,324],{"class":323},"sMK4o"," '",[306,326,287],{"class":327},"sfazB",[306,329,330],{"class":323},"'\n",[306,332,334,336,339,342,345,348,350,353],{"class":308,"line":333},2,[306,335,313],{"class":312},[306,337,338],{"class":323}," {",[306,340,341],{"class":316}," createApp",[306,343,344],{"class":323}," }",[306,346,347],{"class":312}," from",[306,349,324],{"class":323},[306,351,352],{"class":327},"vue",[306,354,330],{"class":323},[306,356,358,360,363,365,367,370],{"class":308,"line":357},3,[306,359,313],{"class":312},[306,361,362],{"class":316}," App ",[306,364,320],{"class":312},[306,366,324],{"class":323},[306,368,369],{"class":327},".\u002FApp.vue",[306,371,330],{"class":323},[306,373,375],{"class":308,"line":374},4,[306,376,378],{"emptyLinePlaceholder":377},true,"\n",[306,380,382,386,389,392,395,398,400,403,406,409,412,414],{"class":308,"line":381},5,[306,383,385],{"class":384},"s2Zo4","createApp",[306,387,388],{"class":316},"(App)",[306,390,391],{"class":323},".",[306,393,394],{"class":384},"use",[306,396,397],{"class":316},"(ColorffyUI)",[306,399,391],{"class":323},[306,401,402],{"class":384},"mount",[306,404,405],{"class":316},"(",[306,407,408],{"class":323},"'",[306,410,411],{"class":327},"#app",[306,413,408],{"class":323},[306,415,416],{"class":316},")\n",[279,418,419],{},"Then use components anywhere — no imports needed:",[295,421,424],{"className":422,"code":423,"language":352,"meta":301,"style":301},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUiButton variant=\"filled\" color=\"primary\" text=\"Click me!\" \u002F>\n  \u003CUiCard>\n    \u003Ctemplate #body>\n      \u003Ch2>Card content\u003C\u002Fh2>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUiCard>\n\u003C\u002Ftemplate>\n",[303,425,426,438,488,497,512,532,542,552],{"__ignoreMap":301},[306,427,428,431,435],{"class":308,"line":309},[306,429,430],{"class":323},"\u003C",[306,432,434],{"class":433},"swJcz","template",[306,436,437],{"class":323},">\n",[306,439,440,443,446,450,453,456,459,461,464,466,468,471,473,476,478,480,483,485],{"class":308,"line":333},[306,441,442],{"class":323},"  \u003C",[306,444,445],{"class":433},"UiButton",[306,447,449],{"class":448},"spNyl"," variant",[306,451,452],{"class":323},"=",[306,454,455],{"class":323},"\"",[306,457,458],{"class":327},"filled",[306,460,455],{"class":323},[306,462,463],{"class":448}," color",[306,465,452],{"class":323},[306,467,455],{"class":323},[306,469,470],{"class":327},"primary",[306,472,455],{"class":323},[306,474,475],{"class":448}," text",[306,477,452],{"class":323},[306,479,455],{"class":323},[306,481,482],{"class":327},"Click me!",[306,484,455],{"class":323},[306,486,487],{"class":323}," \u002F>\n",[306,489,490,492,495],{"class":308,"line":357},[306,491,442],{"class":323},[306,493,494],{"class":433},"UiCard",[306,496,437],{"class":323},[306,498,499,502,504,507,510],{"class":308,"line":374},[306,500,501],{"class":323},"    \u003C",[306,503,434],{"class":433},[306,505,506],{"class":323}," #",[306,508,509],{"class":448},"body",[306,511,437],{"class":323},[306,513,514,517,519,522,525,528,530],{"class":308,"line":381},[306,515,516],{"class":323},"      \u003C",[306,518,290],{"class":433},[306,520,521],{"class":323},">",[306,523,524],{"class":316},"Card content",[306,526,527],{"class":323},"\u003C\u002F",[306,529,290],{"class":433},[306,531,437],{"class":323},[306,533,535,538,540],{"class":308,"line":534},6,[306,536,537],{"class":323},"    \u003C\u002F",[306,539,434],{"class":433},[306,541,437],{"class":323},[306,543,545,548,550],{"class":308,"line":544},7,[306,546,547],{"class":323},"  \u003C\u002F",[306,549,494],{"class":433},[306,551,437],{"class":323},[306,553,555,557,559],{"class":308,"line":554},8,[306,556,527],{"class":323},[306,558,434],{"class":433},[306,560,437],{"class":323},[290,562,564],{"id":563},"import-individually-tree-shaking","Import individually (tree-shaking)",[295,566,568],{"className":422,"code":567,"language":352,"meta":301,"style":301},"\u003Cscript setup lang=\"ts\">\nimport { UiAlert, UiButton, UiCard } from '@colorffy\u002Fui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiButton variant=\"filled\" color=\"primary\" text=\"Click me!\" \u002F>\n  \u003CUiAlert type=\"banner\" variant=\"success\" message=\"Operation successful!\" \u002F>\n\u003C\u002Ftemplate>\n",[303,569,570,593,623,631,635,643,681,725],{"__ignoreMap":301},[306,571,572,574,577,580,583,585,587,589,591],{"class":308,"line":309},[306,573,430],{"class":323},[306,575,576],{"class":433},"script",[306,578,579],{"class":448}," setup",[306,581,582],{"class":448}," lang",[306,584,452],{"class":323},[306,586,455],{"class":323},[306,588,300],{"class":327},[306,590,455],{"class":323},[306,592,437],{"class":323},[306,594,595,597,599,602,605,608,610,613,615,617,619,621],{"class":308,"line":333},[306,596,313],{"class":312},[306,598,338],{"class":323},[306,600,601],{"class":316}," UiAlert",[306,603,604],{"class":323},",",[306,606,607],{"class":316}," UiButton",[306,609,604],{"class":323},[306,611,612],{"class":316}," UiCard",[306,614,344],{"class":323},[306,616,347],{"class":312},[306,618,324],{"class":323},[306,620,287],{"class":327},[306,622,330],{"class":323},[306,624,625,627,629],{"class":308,"line":357},[306,626,527],{"class":323},[306,628,576],{"class":433},[306,630,437],{"class":323},[306,632,633],{"class":308,"line":374},[306,634,378],{"emptyLinePlaceholder":377},[306,636,637,639,641],{"class":308,"line":381},[306,638,430],{"class":323},[306,640,434],{"class":433},[306,642,437],{"class":323},[306,644,645,647,649,651,653,655,657,659,661,663,665,667,669,671,673,675,677,679],{"class":308,"line":534},[306,646,442],{"class":323},[306,648,445],{"class":433},[306,650,449],{"class":448},[306,652,452],{"class":323},[306,654,455],{"class":323},[306,656,458],{"class":327},[306,658,455],{"class":323},[306,660,463],{"class":448},[306,662,452],{"class":323},[306,664,455],{"class":323},[306,666,470],{"class":327},[306,668,455],{"class":323},[306,670,475],{"class":448},[306,672,452],{"class":323},[306,674,455],{"class":323},[306,676,482],{"class":327},[306,678,455],{"class":323},[306,680,487],{"class":323},[306,682,683,685,688,691,693,695,698,700,702,704,706,709,711,714,716,718,721,723],{"class":308,"line":544},[306,684,442],{"class":323},[306,686,687],{"class":433},"UiAlert",[306,689,690],{"class":448}," type",[306,692,452],{"class":323},[306,694,455],{"class":323},[306,696,697],{"class":327},"banner",[306,699,455],{"class":323},[306,701,449],{"class":448},[306,703,452],{"class":323},[306,705,455],{"class":323},[306,707,708],{"class":327},"success",[306,710,455],{"class":323},[306,712,713],{"class":448}," message",[306,715,452],{"class":323},[306,717,455],{"class":323},[306,719,720],{"class":327},"Operation successful!",[306,722,455],{"class":323},[306,724,487],{"class":323},[306,726,727,729,731],{"class":308,"line":554},[306,728,527],{"class":323},[306,730,434],{"class":433},[306,732,437],{"class":323},[290,734,736],{"id":735},"register-globally-nuxt-3","Register globally (Nuxt 3)",[295,738,741],{"className":297,"code":739,"filename":740,"language":300,"meta":301,"style":301},"import ColorffyUI from '@colorffy\u002Fui'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(ColorffyUI)\n})\n","plugins\u002Fcolorffy-ui.ts",[303,742,743,757,761,789,810],{"__ignoreMap":301},[306,744,745,747,749,751,753,755],{"class":308,"line":309},[306,746,313],{"class":312},[306,748,317],{"class":316},[306,750,320],{"class":312},[306,752,324],{"class":323},[306,754,287],{"class":327},[306,756,330],{"class":323},[306,758,759],{"class":308,"line":333},[306,760,378],{"emptyLinePlaceholder":377},[306,762,763,766,769,772,774,776,780,783,786],{"class":308,"line":357},[306,764,765],{"class":312},"export",[306,767,768],{"class":312}," default",[306,770,771],{"class":384}," defineNuxtPlugin",[306,773,405],{"class":316},[306,775,405],{"class":323},[306,777,779],{"class":778},"sHdIc","nuxtApp",[306,781,782],{"class":323},")",[306,784,785],{"class":448}," =>",[306,787,788],{"class":323}," {\n",[306,790,791,794,796,799,801,803,805,808],{"class":308,"line":374},[306,792,793],{"class":316},"  nuxtApp",[306,795,391],{"class":323},[306,797,798],{"class":316},"vueApp",[306,800,391],{"class":323},[306,802,394],{"class":384},[306,804,405],{"class":433},[306,806,807],{"class":316},"ColorffyUI",[306,809,416],{"class":433},[306,811,812,815],{"class":308,"line":381},[306,813,814],{"class":323},"}",[306,816,416],{"class":316},[818,819,821],"h3",{"id":820},"enable-auto-imports-optional","Enable auto-imports (optional)",[295,823,826],{"className":297,"code":824,"filename":825,"language":300,"meta":301,"style":301},"export default defineNuxtConfig({\n  components: [\n    {\n      path: 'node_modules\u002F@colorffy\u002Fui\u002Fdist',\n      pattern: '**\u002F*.vue',\n      pathPrefix: false,\n    },\n  ],\n})\n","nuxt.config.ts",[303,827,828,842,853,858,875,891,904,909,916],{"__ignoreMap":301},[306,829,830,832,834,837,839],{"class":308,"line":309},[306,831,765],{"class":312},[306,833,768],{"class":312},[306,835,836],{"class":384}," defineNuxtConfig",[306,838,405],{"class":316},[306,840,841],{"class":323},"{\n",[306,843,844,847,850],{"class":308,"line":333},[306,845,846],{"class":433},"  components",[306,848,849],{"class":323},":",[306,851,852],{"class":316}," [\n",[306,854,855],{"class":308,"line":357},[306,856,857],{"class":323},"    {\n",[306,859,860,863,865,867,870,872],{"class":308,"line":374},[306,861,862],{"class":433},"      path",[306,864,849],{"class":323},[306,866,324],{"class":323},[306,868,869],{"class":327},"node_modules\u002F@colorffy\u002Fui\u002Fdist",[306,871,408],{"class":323},[306,873,874],{"class":323},",\n",[306,876,877,880,882,884,887,889],{"class":308,"line":381},[306,878,879],{"class":433},"      pattern",[306,881,849],{"class":323},[306,883,324],{"class":323},[306,885,886],{"class":327},"**\u002F*.vue",[306,888,408],{"class":323},[306,890,874],{"class":323},[306,892,893,896,898,902],{"class":308,"line":534},[306,894,895],{"class":433},"      pathPrefix",[306,897,849],{"class":323},[306,899,901],{"class":900},"sfNiH"," false",[306,903,874],{"class":323},[306,905,906],{"class":308,"line":544},[306,907,908],{"class":323},"    },\n",[306,910,911,914],{"class":308,"line":554},[306,912,913],{"class":316},"  ]",[306,915,874],{"class":323},[306,917,919,921],{"class":308,"line":918},9,[306,920,814],{"class":323},[306,922,416],{"class":316},[290,924,926],{"id":925},"use-composables","Use composables",[295,928,930],{"className":297,"code":929,"language":300,"meta":301,"style":301},"import { useDateUtils, useTextUtils, useToast } from '@colorffy\u002Fui'\n\nconst toast = useToast()\ntoast.show({ message: 'Success!', variant: 'success' })\n",[303,931,932,961,965,980],{"__ignoreMap":301},[306,933,934,936,938,941,943,946,948,951,953,955,957,959],{"class":308,"line":309},[306,935,313],{"class":312},[306,937,338],{"class":323},[306,939,940],{"class":316}," useDateUtils",[306,942,604],{"class":323},[306,944,945],{"class":316}," useTextUtils",[306,947,604],{"class":323},[306,949,950],{"class":316}," useToast",[306,952,344],{"class":323},[306,954,347],{"class":312},[306,956,324],{"class":323},[306,958,287],{"class":327},[306,960,330],{"class":323},[306,962,963],{"class":308,"line":333},[306,964,378],{"emptyLinePlaceholder":377},[306,966,967,970,973,975,977],{"class":308,"line":357},[306,968,969],{"class":448},"const",[306,971,972],{"class":316}," toast ",[306,974,452],{"class":323},[306,976,950],{"class":384},[306,978,979],{"class":316},"()\n",[306,981,982,985,987,990,992,995,997,999,1001,1004,1006,1008,1010,1012,1014,1016,1018,1020],{"class":308,"line":374},[306,983,984],{"class":316},"toast",[306,986,391],{"class":323},[306,988,989],{"class":384},"show",[306,991,405],{"class":316},[306,993,994],{"class":323},"{",[306,996,713],{"class":433},[306,998,849],{"class":323},[306,1000,324],{"class":323},[306,1002,1003],{"class":327},"Success!",[306,1005,408],{"class":323},[306,1007,604],{"class":323},[306,1009,449],{"class":433},[306,1011,849],{"class":323},[306,1013,324],{"class":323},[306,1015,708],{"class":327},[306,1017,408],{"class":323},[306,1019,344],{"class":323},[306,1021,416],{"class":316},[290,1023,1025],{"id":1024},"use-with-typescript","Use with TypeScript",[295,1027,1029],{"className":297,"code":1028,"language":300,"meta":301,"style":301},"import type { ButtonColor, ButtonVariant } from '@colorffy\u002Fui'\n\nconst variant: ButtonVariant = 'filled'\nconst color: ButtonColor = 'primary'\n",[303,1030,1031,1057,1061,1081],{"__ignoreMap":301},[306,1032,1033,1035,1037,1039,1042,1044,1047,1049,1051,1053,1055],{"class":308,"line":309},[306,1034,313],{"class":312},[306,1036,690],{"class":312},[306,1038,338],{"class":323},[306,1040,1041],{"class":316}," ButtonColor",[306,1043,604],{"class":323},[306,1045,1046],{"class":316}," ButtonVariant",[306,1048,344],{"class":323},[306,1050,347],{"class":312},[306,1052,324],{"class":323},[306,1054,287],{"class":327},[306,1056,330],{"class":323},[306,1058,1059],{"class":308,"line":333},[306,1060,378],{"emptyLinePlaceholder":377},[306,1062,1063,1065,1067,1069,1072,1075,1077,1079],{"class":308,"line":357},[306,1064,969],{"class":448},[306,1066,449],{"class":316},[306,1068,849],{"class":323},[306,1070,1046],{"class":1071},"sBMFI",[306,1073,1074],{"class":323}," =",[306,1076,324],{"class":323},[306,1078,458],{"class":327},[306,1080,330],{"class":323},[306,1082,1083,1085,1087,1089,1091,1093,1095,1097],{"class":308,"line":374},[306,1084,969],{"class":448},[306,1086,463],{"class":316},[306,1088,849],{"class":323},[306,1090,1041],{"class":1071},[306,1092,1074],{"class":323},[306,1094,324],{"class":323},[306,1096,470],{"class":327},[306,1098,330],{"class":323},[1100,1101,1102],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":301,"searchDepth":333,"depth":333,"links":1104},[1105,1106,1107,1110,1111],{"id":292,"depth":333,"text":293},{"id":563,"depth":333,"text":564},{"id":735,"depth":333,"text":736,"children":1108},[1109],{"id":820,"depth":357,"text":821},{"id":925,"depth":333,"text":926},{"id":1024,"depth":333,"text":1025},"Register and use Colorffy UI components in Vue 3 and Nuxt 3.","md",null,{},{"icon":31},{"title":122,"description":1112},"zQZsY_HrCxpvfKU-k-oqTFQiJvsr_uQ5BmtfUZiPz-w",[1120,1122],{"title":111,"path":112,"stem":113,"description":1121,"icon":114,"children":-1},"The CSS custom properties behind Colorffy's adaptive tonal color system.",{"title":28,"path":132,"stem":133,"description":1123,"icon":134,"children":-1},"Every Colorffy UI component, organized by category.",1782196218795]