[{"data":1,"prerenderedAt":594},["ShallowReactive",2],{"navigation_docs":3,"landing":273},[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":275,"body":276,"description":275,"extension":585,"meta":586,"navigation":587,"path":588,"seo":589,"stem":592,"__hash__":593},"landing\u002Findex.md","",{"type":277,"value":278,"toc":583},"minimark",[279,376,446,567,574,579],[280,281,282,295,297,300,312],"u-page-hero",{},[283,284,285],"template",{"v-slot:headline":275},[286,287,294],"u-button",{"color":288,"size":289,"to":290,"target":291,"trailing-icon":292,"variant":293},"neutral","sm","https:\u002F\u002Fgithub.com\u002Fgiancarlosgza\u002Fcolorffy-workspace\u002Freleases","_blank","i-lucide-arrow-right","subtle","v1.8.0 — Sidebar & Breadcrumb components",[283,296,116],{"v-slot:title":275},[283,298,299],{"v-slot:description":275},"A modern Vue 3 component library and an expressive SCSS framework. 70+ headless UI components, a powerful tonal color system, and vivid theming — together or on their own.",[283,301,302,306],{"v-slot:links":275},[286,303,305],{"color":288,"size":304,"to":12,"trailing-icon":292},"xl","Get Started",[286,307,311],{"color":288,"size":304,"to":308,"target":291,"variant":309,"icon":310},"https:\u002F\u002Fgithub.com\u002Fgiancarlosgza\u002Fcolorffy-workspace","outline","i-simple-icons-github","View on GitHub",[313,314,315,343,360],"code-group",{},[316,317,322],"pre",{"className":318,"code":319,"filename":320,"language":321,"meta":275,"style":275},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @colorffy\u002Fui @colorffy\u002Fcss\n","pnpm","bash",[323,324,325],"code",{"__ignoreMap":275},[326,327,330,333,337,340],"span",{"class":328,"line":329},"line",1,[326,331,320],{"class":332},"sBMFI",[326,334,336],{"class":335},"sfazB"," add",[326,338,339],{"class":335}," @colorffy\u002Fui",[326,341,342],{"class":335}," @colorffy\u002Fcss\n",[316,344,347],{"className":318,"code":345,"filename":346,"language":321,"meta":275,"style":275},"npm install @colorffy\u002Fui @colorffy\u002Fcss\n","npm",[323,348,349],{"__ignoreMap":275},[326,350,351,353,356,358],{"class":328,"line":329},[326,352,346],{"class":332},[326,354,355],{"class":335}," install",[326,357,339],{"class":335},[326,359,342],{"class":335},[316,361,364],{"className":318,"code":362,"filename":363,"language":321,"meta":275,"style":275},"yarn add @colorffy\u002Fui @colorffy\u002Fcss\n","yarn",[323,365,366],{"__ignoreMap":275},[326,367,368,370,372,374],{"class":328,"line":329},[326,369,363],{"class":332},[326,371,336],{"class":335},[326,373,339],{"class":335},[326,375,342],{"class":335},[377,378,381],"u-page-section",{"description":379,"title":380},"A complete toolkit for building polished, themeable interfaces.","Everything you need",[382,383,384,394,410,419,428,437],"u-page-grid",{},[385,386,388,391],"u-page-card",{":spotlight":387,"icon":117,"to":132},"true",[283,389,390],{"v-slot:title":275},"70+ headless components",[283,392,393],{"v-slot:description":275},"Accordions, dialogs, forms, tables, navigation, and more — accessible and unstyled.",[385,395,396,399],{":spotlight":387,"icon":23,"to":34},[283,397,398],{"v-slot:title":275},"Tonal color system",[283,400,401,402,405,406,409],{"v-slot:description":275},"Adaptive ",[323,403,404],{},"--theme-*"," tones generated from your brand colors with ",[323,407,408],{},"color-mix()",".",[385,411,413,416],{":spotlight":387,"icon":412},"i-lucide-moon",[283,414,415],{"v-slot:title":275},"Dark mode built in",[283,417,418],{"v-slot:description":275},"Every component and color token adapts to light and dark automatically.",[385,420,422,425],{":spotlight":387,"icon":421},"i-simple-icons-typescript",[283,423,424],{"v-slot:title":275},"Fully typed",[283,426,427],{"v-slot:description":275},"Complete TypeScript definitions for every component, prop, and composable.",[385,429,431,434],{":spotlight":387,"icon":430},"i-lucide-feather",[283,432,433],{"v-slot:title":275},"Tree-shakeable",[283,435,436],{"v-slot:description":275},"Import only what you use, or register everything globally — your call.",[385,438,440,443],{":spotlight":387,"icon":439,"to":123},"i-simple-icons-nuxtdotjs",[283,441,442],{"v-slot:title":275},"Vue 3 & Nuxt ready",[283,444,445],{"v-slot:description":275},"Works in any Vue 3 app and drops into Nuxt 3\u002F4 with a plugin or auto-imports.",[377,447,450],{"description":448,"title":449},"Register once, then compose anywhere — style with Colorffy CSS or bring your own.","A familiar, expressive API",[385,451,452],{":spotlight":387},[316,453,457],{"className":454,"code":455,"language":456,"meta":275,"style":275},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUiButton variant=\"filled\" color=\"primary\" text=\"Get started\" \u002F>\n  \u003CUiBadge text=\"New\" variant=\"accent\" pill \u002F>\n\u003C\u002Ftemplate>\n","vue",[323,458,459,471,522,557],{"__ignoreMap":275},[326,460,461,465,468],{"class":328,"line":329},[326,462,464],{"class":463},"sMK4o","\u003C",[326,466,283],{"class":467},"swJcz",[326,469,470],{"class":463},">\n",[326,472,474,477,480,484,487,490,493,495,498,500,502,505,507,510,512,514,517,519],{"class":328,"line":473},2,[326,475,476],{"class":463},"  \u003C",[326,478,479],{"class":467},"UiButton",[326,481,483],{"class":482},"spNyl"," variant",[326,485,486],{"class":463},"=",[326,488,489],{"class":463},"\"",[326,491,492],{"class":335},"filled",[326,494,489],{"class":463},[326,496,497],{"class":482}," color",[326,499,486],{"class":463},[326,501,489],{"class":463},[326,503,504],{"class":335},"primary",[326,506,489],{"class":463},[326,508,509],{"class":482}," text",[326,511,486],{"class":463},[326,513,489],{"class":463},[326,515,516],{"class":335},"Get started",[326,518,489],{"class":463},[326,520,521],{"class":463}," \u002F>\n",[326,523,525,527,530,532,534,536,539,541,543,545,547,550,552,555],{"class":328,"line":524},3,[326,526,476],{"class":463},[326,528,529],{"class":467},"UiBadge",[326,531,509],{"class":482},[326,533,486],{"class":463},[326,535,489],{"class":463},[326,537,538],{"class":335},"New",[326,540,489],{"class":463},[326,542,483],{"class":482},[326,544,486],{"class":463},[326,546,489],{"class":463},[326,548,549],{"class":335},"accent",[326,551,489],{"class":463},[326,553,554],{"class":482}," pill",[326,556,521],{"class":463},[326,558,560,563,565],{"class":328,"line":559},4,[326,561,562],{"class":463},"\u003C\u002F",[326,564,283],{"class":467},[326,566,470],{"class":463},[377,568,569],{},[570,571],"u-page-logos",{":items":572,"title":573},"[\"i-simple-icons-vuedotjs\",\"i-simple-icons-nuxtdotjs\",\"i-simple-icons-vite\",\"i-simple-icons-sass\",\"i-simple-icons-typescript\"]","Works with your stack",[377,575],{"description":576,"title":577,":links":578},"Install the packages and ship a polished, themeable UI today.","Start building with Colorffy UI","[{\"label\":\"Get Started\",\"to\":\"\u002Fgetting-started\u002Fintroduction\",\"icon\":\"i-lucide-rocket\",\"color\":\"neutral\",\"size\":\"xl\"},{\"label\":\"Browse components\",\"to\":\"\u002Fcolorffy-ui\u002Fcomponents\u002Foverview\",\"color\":\"neutral\",\"variant\":\"outline\",\"size\":\"xl\"}]",[580,581,582],"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}",{"title":275,"searchDepth":473,"depth":473,"links":584},[],"md",{},true,"\u002F",{"title":590,"description":591},"Colorffy UI Documentation","A modern Vue 3 component library and expressive SCSS framework for building vibrant, beautiful interfaces.","index","W3BH_D0WY2QCXJauLIosjQ95wPg4ZpCpQGD7IPQ0P78",1782196218302]