[{"data":1,"prerenderedAt":1317},["ShallowReactive",2],{"navigation":3,"/blog/nuxt-ui":15,"/blog/nuxt-ui-surround":1310},[4],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/docs/getting-started","1.docs/1.getting-started/1.index",[9,11],{"title":10,"path":6,"stem":7},"Introduction",{"title":12,"path":13,"stem":14},"Installation","/docs/getting-started/installation","1.docs/1.getting-started/2.installation",{"id":16,"title":17,"authors":18,"badge":24,"body":26,"date":1300,"description":1301,"extension":1302,"image":1303,"meta":1305,"navigation":429,"path":1306,"seo":1307,"stem":1308,"__hash__":1309},"posts/3.blog/7.nuxt-ui.md","I tested Nuxt UI",[19],{"name":20,"to":21,"avatar":22},"Kevin browski","https://twitter.com/benjamincanac",{"src":23},"https://i.pravatar.cc/128?u=6",{"label":25},"Web development, Nuxt",{"type":27,"value":28,"toc":1280},"minimark",[29,33,37,42,70,74,78,89,160,174,233,236,240,263,275,279,282,289,553,557,566,574,578,681,687,785,789,793,798,812,878,897,947,951,956,965,1028,1040,1047,1053,1128,1138,1142,1145,1148,1151,1159,1165,1207,1211,1258,1262,1276],[30,31,10],"h2",{"id":32},"introduction",[34,35,36],"p",{},"Nuxt UI is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI to help you build beautiful and accessible user interfaces.\nIts goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.",[38,39,41],"h3",{"id":40},"awesome-features","✨ Awesome Features",[43,44,45,49,52,55,58,61,64,67],"ul",{},[46,47,48],"li",{},"Built with Headless UI and Tailwind CSS",[46,50,51],{},"HMR support through Nuxt App Config",[46,53,54],{},"Dark mode support",[46,56,57],{},"Support for LTR and RTL languages",[46,59,60],{},"Keyboard shortcuts",[46,62,63],{},"Bundled icons",[46,65,66],{},"Fully typed",[46,68,69],{},"Figma Kit",[30,71,73],{"id":72},"easy-and-quick-installation","😌 Easy and quick installation",[38,75,77],{"id":76},"setup","Setup",[79,80,81],"ol",{},[46,82,83,84,88],{},"Install ",[85,86,87],"code",{},"@nuxt/ui"," dependency to your project:",[90,91,92,117,131,146],"code-group",{},[93,94,100],"pre",{"className":95,"code":96,"filename":97,"language":98,"meta":99,"style":99},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @nuxt/ui\n","pnpm","bash","",[85,101,102],{"__ignoreMap":99},[103,104,107,110,114],"span",{"class":105,"line":106},"line",1,[103,108,97],{"class":109},"sBMFI",[103,111,113],{"class":112},"sfazB"," add",[103,115,116],{"class":112}," @nuxt/ui\n",[93,118,121],{"className":95,"code":119,"filename":120,"language":98,"meta":99,"style":99},"yarn add @nuxt/ui\n","yarn",[85,122,123],{"__ignoreMap":99},[103,124,125,127,129],{"class":105,"line":106},[103,126,120],{"class":109},[103,128,113],{"class":112},[103,130,116],{"class":112},[93,132,135],{"className":95,"code":133,"filename":134,"language":98,"meta":99,"style":99},"npm install @nuxt/ui\n","npm",[85,136,137],{"__ignoreMap":99},[103,138,139,141,144],{"class":105,"line":106},[103,140,134],{"class":109},[103,142,143],{"class":112}," install",[103,145,116],{"class":112},[93,147,150],{"className":95,"code":148,"filename":149,"language":98,"meta":99,"style":99},"bun add @nuxt/ui\n","bun",[85,151,152],{"__ignoreMap":99},[103,153,154,156,158],{"class":105,"line":106},[103,155,149],{"class":109},[103,157,113],{"class":112},[103,159,116],{"class":112},[79,161,163],{"start":162},2,[46,164,165,166,169,170,173],{},"Add it to your ",[85,167,168],{},"modules"," section in your ",[85,171,172],{},"nuxt.config",":",[93,175,180],{"className":176,"code":177,"filename":178,"language":179,"meta":99,"style":99},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxt/ui']\n})\n","nuxt.config.ts","ts",[85,181,182,203,224],{"__ignoreMap":99},[103,183,184,188,191,195,199],{"class":105,"line":106},[103,185,187],{"class":186},"s7zQu","export",[103,189,190],{"class":186}," default",[103,192,194],{"class":193},"s2Zo4"," defineNuxtConfig",[103,196,198],{"class":197},"sTEyZ","(",[103,200,202],{"class":201},"sMK4o","{\n",[103,204,205,209,211,214,217,219,221],{"class":105,"line":162},[103,206,208],{"class":207},"swJcz","  modules",[103,210,173],{"class":201},[103,212,213],{"class":197}," [",[103,215,216],{"class":201},"'",[103,218,87],{"class":112},[103,220,216],{"class":201},[103,222,223],{"class":197},"]\n",[103,225,227,230],{"class":105,"line":226},3,[103,228,229],{"class":201},"}",[103,231,232],{"class":197},")\n",[34,234,235],{},"That's it! You can now use all the components and composables in your Nuxt app 🤩",[38,237,239],{"id":238},"automatically-installed-modules","Automatically installed modules",[34,241,242,243,250,251,256,257,262],{},"Nuxt UI will automatically install the ",[244,245,249],"a",{"href":246,"rel":247},"https://tailwindcss.nuxtjs.org/",[248],"nofollow","@nuxtjs/tailwindcss",", ",[244,252,255],{"href":253,"rel":254},"https://color-mode.nuxtjs.org/",[248],"@nuxtjs/color-mode"," and ",[244,258,261],{"href":259,"rel":260},"https://github.com/nuxt-modules/icon",[248],"nuxt-icon"," modules for you.",[264,265,266],"warning",{},[34,267,268,269,256,271,274],{},"You should remove them from your ",[85,270,168],{},[85,272,273],{},"dependencies"," if you've previously installed them.",[38,276,278],{"id":277},"and-all-in-typescript","...And all in Typescript !",[34,280,281],{},"This module is written in TypeScript and provides typings for all the components and composables.",[34,283,284,285,288],{},"You can use those types in your own components by importing them from ",[85,286,287],{},"#ui/types",", for example when defining wrapper components:",[93,290,294],{"className":291,"code":292,"language":293,"meta":99,"style":99},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUBreadcrumb :links=\"links\">\n    \u003Ctemplate #icon=\"{ link }\">\n      \u003CUIcon :name=\"link.icon\" />\n    \u003C/template>\n  \u003C/UBreadcrumb>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { BreadcrumbLink } from '#ui/types'\n\nexport interface Props {\n  links: BreadcrumbLink[]\n}\n\ndefineProps\u003CProps>()\n\u003C/script>\n","vue",[85,295,296,307,334,363,394,404,414,424,431,455,484,489,503,516,522,527,544],{"__ignoreMap":99},[103,297,298,301,304],{"class":105,"line":106},[103,299,300],{"class":201},"\u003C",[103,302,303],{"class":207},"template",[103,305,306],{"class":201},">\n",[103,308,309,312,315,318,322,325,328,330,332],{"class":105,"line":162},[103,310,311],{"class":201},"  \u003C",[103,313,314],{"class":207},"UBreadcrumb",[103,316,317],{"class":201}," :",[103,319,321],{"class":320},"spNyl","links",[103,323,324],{"class":201},"=",[103,326,327],{"class":201},"\"",[103,329,321],{"class":197},[103,331,327],{"class":201},[103,333,306],{"class":201},[103,335,336,339,341,344,347,349,351,354,357,359,361],{"class":105,"line":226},[103,337,338],{"class":201},"    \u003C",[103,340,303],{"class":207},[103,342,343],{"class":201}," #",[103,345,346],{"class":320},"icon",[103,348,324],{"class":201},[103,350,327],{"class":201},[103,352,353],{"class":201},"{",[103,355,356],{"class":197}," link ",[103,358,229],{"class":201},[103,360,327],{"class":201},[103,362,306],{"class":201},[103,364,366,369,372,374,377,379,381,384,387,389,391],{"class":105,"line":365},4,[103,367,368],{"class":201},"      \u003C",[103,370,371],{"class":207},"UIcon",[103,373,317],{"class":201},[103,375,376],{"class":320},"name",[103,378,324],{"class":201},[103,380,327],{"class":201},[103,382,383],{"class":197},"link",[103,385,386],{"class":201},".",[103,388,346],{"class":197},[103,390,327],{"class":201},[103,392,393],{"class":201}," />\n",[103,395,397,400,402],{"class":105,"line":396},5,[103,398,399],{"class":201},"    \u003C/",[103,401,303],{"class":207},[103,403,306],{"class":201},[103,405,407,410,412],{"class":105,"line":406},6,[103,408,409],{"class":201},"  \u003C/",[103,411,314],{"class":207},[103,413,306],{"class":201},[103,415,417,420,422],{"class":105,"line":416},7,[103,418,419],{"class":201},"\u003C/",[103,421,303],{"class":207},[103,423,306],{"class":201},[103,425,427],{"class":105,"line":426},8,[103,428,430],{"emptyLinePlaceholder":429},true,"\n",[103,432,434,436,439,442,445,447,449,451,453],{"class":105,"line":433},9,[103,435,300],{"class":201},[103,437,438],{"class":207},"script",[103,440,441],{"class":320}," setup",[103,443,444],{"class":320}," lang",[103,446,324],{"class":201},[103,448,327],{"class":201},[103,450,179],{"class":112},[103,452,327],{"class":201},[103,454,306],{"class":201},[103,456,458,461,464,467,470,473,476,479,481],{"class":105,"line":457},10,[103,459,460],{"class":186},"import",[103,462,463],{"class":186}," type",[103,465,466],{"class":201}," {",[103,468,469],{"class":197}," BreadcrumbLink",[103,471,472],{"class":201}," }",[103,474,475],{"class":186}," from",[103,477,478],{"class":201}," '",[103,480,287],{"class":112},[103,482,483],{"class":201},"'\n",[103,485,487],{"class":105,"line":486},11,[103,488,430],{"emptyLinePlaceholder":429},[103,490,492,494,497,500],{"class":105,"line":491},12,[103,493,187],{"class":186},[103,495,496],{"class":320}," interface",[103,498,499],{"class":109}," Props",[103,501,502],{"class":201}," {\n",[103,504,506,509,511,513],{"class":105,"line":505},13,[103,507,508],{"class":207},"  links",[103,510,173],{"class":201},[103,512,469],{"class":109},[103,514,515],{"class":197},"[]\n",[103,517,519],{"class":105,"line":518},14,[103,520,521],{"class":201},"}\n",[103,523,525],{"class":105,"line":524},15,[103,526,430],{"emptyLinePlaceholder":429},[103,528,530,533,535,538,541],{"class":105,"line":529},16,[103,531,532],{"class":193},"defineProps",[103,534,300],{"class":201},[103,536,537],{"class":109},"Props",[103,539,540],{"class":201},">",[103,542,543],{"class":197},"()\n",[103,545,547,549,551],{"class":105,"line":546},17,[103,548,419],{"class":201},[103,550,438],{"class":207},[103,552,306],{"class":201},[38,554,556],{"id":555},"the-power-of-intellisense","The power of IntelliSense",[34,558,559,560,565],{},"If you're using VSCode, you can install the ",[244,561,564],{"href":562,"rel":563},"https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss",[248],"Tailwind CSS IntelliSense"," extension to get autocompletion for the classes.",[34,567,568,569,573],{},"You can read more on how to set it up on the ",[244,570,249],{"href":571,"rel":572},"https://tailwindcss.nuxtjs.org/tailwind/editor-support",[248]," module documentation.",[38,575,577],{"id":576},"many-options","Many options",[579,580,581,597],"table",{},[582,583,584],"thead",{},[585,586,587,591,594],"tr",{},[588,589,590],"th",{},"Key",[588,592,593],{},"Default",[588,595,596],{},"Description",[598,599,600,616,631,646,661],"tbody",{},[585,601,602,608,613],{},[603,604,605],"td",{},[85,606,607],{},"prefix",[603,609,610],{},[85,611,612],{},"u",[603,614,615],{},"Define the prefix of the imported components.",[585,617,618,623,628],{},[603,619,620],{},[85,621,622],{},"global",[603,624,625],{},[85,626,627],{},"false",[603,629,630],{},"Expose components globally.",[585,632,633,638,643],{},[603,634,635],{},[85,636,637],{},"icons",[603,639,640],{},[85,641,642],{},"['lucide']",[603,644,645],{},"Icon collections to load.",[585,647,648,653,658],{},[603,649,650],{},[85,651,652],{},"safelistColors",[603,654,655],{},[85,656,657],{},"['primary']",[603,659,660],{},"Force safelisting of colors to need be purged.",[585,662,663,668,672],{},[603,664,665],{},[85,666,667],{},"disableGlobalStyles",[603,669,670],{},[85,671,627],{},[603,673,674,675,680],{},"Disable ",[244,676,679],{"href":677,"rel":678},"https://github.com/nuxt/ui/blob/dev/src/runtime/ui.css",[248],"global CSS styles"," injected by the module.",[34,682,683,684,686],{},"Configure options in your ",[85,685,178],{}," as such:",[93,688,690],{"className":176,"code":689,"filename":178,"language":179,"meta":99,"style":99},"export default defineNuxtConfig({\n  modules: ['@nuxt/ui'],\n  ui: {\n    global: true,\n    icons: ['mdi', 'simple-icons']\n  }\n})\n",[85,691,692,704,724,733,746,774,779],{"__ignoreMap":99},[103,693,694,696,698,700,702],{"class":105,"line":106},[103,695,187],{"class":186},[103,697,190],{"class":186},[103,699,194],{"class":193},[103,701,198],{"class":197},[103,703,202],{"class":201},[103,705,706,708,710,712,714,716,718,721],{"class":105,"line":162},[103,707,208],{"class":207},[103,709,173],{"class":201},[103,711,213],{"class":197},[103,713,216],{"class":201},[103,715,87],{"class":112},[103,717,216],{"class":201},[103,719,720],{"class":197},"]",[103,722,723],{"class":201},",\n",[103,725,726,729,731],{"class":105,"line":226},[103,727,728],{"class":207},"  ui",[103,730,173],{"class":201},[103,732,502],{"class":201},[103,734,735,738,740,744],{"class":105,"line":365},[103,736,737],{"class":207},"    global",[103,739,173],{"class":201},[103,741,743],{"class":742},"sfNiH"," true",[103,745,723],{"class":201},[103,747,748,751,753,755,757,760,762,765,767,770,772],{"class":105,"line":396},[103,749,750],{"class":207},"    icons",[103,752,173],{"class":201},[103,754,213],{"class":197},[103,756,216],{"class":201},[103,758,759],{"class":112},"mdi",[103,761,216],{"class":201},[103,763,764],{"class":201},",",[103,766,478],{"class":201},[103,768,769],{"class":112},"simple-icons",[103,771,216],{"class":201},[103,773,223],{"class":197},[103,775,776],{"class":105,"line":406},[103,777,778],{"class":201},"  }\n",[103,780,781,783],{"class":105,"line":416},[103,782,229],{"class":201},[103,784,232],{"class":197},[30,786,788],{"id":787},"theming","🎨 Theming",[38,790,792],{"id":791},"colors","Colors",[794,795,797],"h4",{"id":796},"configuration","Configuration",[34,799,800,801,804,805,808,809,386],{},"Components are based on a ",[85,802,803],{},"primary"," and a ",[85,806,807],{},"gray"," color. You can change them in your ",[85,810,811],{},"app.config.ts",[93,813,815],{"className":176,"code":814,"filename":811,"language":179,"meta":99,"style":99},"export default defineAppConfig({\n  ui: {\n    primary: 'green',\n    gray: 'cool'\n  }\n})\n",[85,816,817,830,838,854,868,872],{"__ignoreMap":99},[103,818,819,821,823,826,828],{"class":105,"line":106},[103,820,187],{"class":186},[103,822,190],{"class":186},[103,824,825],{"class":193}," defineAppConfig",[103,827,198],{"class":197},[103,829,202],{"class":201},[103,831,832,834,836],{"class":105,"line":162},[103,833,728],{"class":207},[103,835,173],{"class":201},[103,837,502],{"class":201},[103,839,840,843,845,847,850,852],{"class":105,"line":226},[103,841,842],{"class":207},"    primary",[103,844,173],{"class":201},[103,846,478],{"class":201},[103,848,849],{"class":112},"green",[103,851,216],{"class":201},[103,853,723],{"class":201},[103,855,856,859,861,863,866],{"class":105,"line":365},[103,857,858],{"class":207},"    gray",[103,860,173],{"class":201},[103,862,478],{"class":201},[103,864,865],{"class":112},"cool",[103,867,483],{"class":201},[103,869,870],{"class":105,"line":396},[103,871,778],{"class":201},[103,873,874,876],{"class":105,"line":406},[103,875,229],{"class":201},[103,877,232],{"class":197},[34,879,880,881,886,887,889,890,892,893,889,895,386],{},"As this module uses Tailwind CSS under the hood, you can use any of the ",[244,882,885],{"href":883,"rel":884},"https://tailwindcss.com/docs/customizing-colors#color-palette-reference",[248],"Tailwind CSS colors"," or your own custom colors. By default, the ",[85,888,803],{}," color is ",[85,891,849],{}," and the ",[85,894,807],{},[85,896,865],{},[34,898,899,900,905,906,911,912,915,916,919,920,923,924,927,928,935,936,941,942,946],{},"When ",[244,901,904],{"href":902,"rel":903},"https://tailwindcss.com/docs/customizing-colors#using-custom-colors",[248],"using custom colors"," or ",[244,907,910],{"href":908,"rel":909},"https://tailwindcss.com/docs/customizing-colors#adding-additional-colors",[248],"adding additional colors"," through the ",[85,913,914],{},"extend"," key in your ",[85,917,918],{},"tailwind.config.ts",", you'll need to make sure to define all the shades from ",[85,921,922],{},"50"," to ",[85,925,926],{},"950"," as most of them are used in the components config defined in ",[244,929,932],{"href":930,"rel":931},"https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts",[248],[85,933,934],{},"ui.config.ts",". You can ",[244,937,940],{"href":938,"rel":939},"https://tailwindcss.com/docs/customizing-colors#generating-colors",[248],"generate your colors"," using tools such as ",[244,943,944],{"href":944,"rel":945},"https://uicolors.app/",[248]," for example.",[38,948,950],{"id":949},"components","Components",[794,952,954],{"id":953},"appconfigts",[85,955,811],{},[34,957,958,959,962,963,386],{},"Components are styled with Tailwind CSS but classes are all defined in the default ",[244,960,934],{"href":930,"rel":961},[248]," file. You can override those in your own ",[85,964,811],{},[93,966,968],{"className":176,"code":967,"filename":811,"language":179,"meta":99,"style":99},"export default defineAppConfig({\n  ui: {\n    container: {\n      constrained: 'max-w-5xl'\n    }\n  }\n})\n",[85,969,970,982,990,999,1013,1018,1022],{"__ignoreMap":99},[103,971,972,974,976,978,980],{"class":105,"line":106},[103,973,187],{"class":186},[103,975,190],{"class":186},[103,977,825],{"class":193},[103,979,198],{"class":197},[103,981,202],{"class":201},[103,983,984,986,988],{"class":105,"line":162},[103,985,728],{"class":207},[103,987,173],{"class":201},[103,989,502],{"class":201},[103,991,992,995,997],{"class":105,"line":226},[103,993,994],{"class":207},"    container",[103,996,173],{"class":201},[103,998,502],{"class":201},[103,1000,1001,1004,1006,1008,1011],{"class":105,"line":365},[103,1002,1003],{"class":207},"      constrained",[103,1005,173],{"class":201},[103,1007,478],{"class":201},[103,1009,1010],{"class":112},"max-w-5xl",[103,1012,483],{"class":201},[103,1014,1015],{"class":105,"line":396},[103,1016,1017],{"class":201},"    }\n",[103,1019,1020],{"class":105,"line":406},[103,1021,778],{"class":201},[103,1023,1024,1026],{"class":105,"line":416},[103,1025,229],{"class":201},[103,1027,232],{"class":197},[34,1029,1030,1031,1036,1037,1039],{},"Thanks to ",[244,1032,1035],{"href":1033,"rel":1034},"https://github.com/dcastil/tailwind-merge",[248],"tailwind-merge",", the ",[85,1038,811],{}," is smartly merged with the default config. This means you don't have to rewrite everything.",[794,1041,1043,1046],{"id":1042},"ui-prop",[85,1044,1045],{},"ui"," prop",[34,1048,1049,1050,1052],{},"Each component has a ",[85,1051,1045],{}," prop that allows you to customize everything specifically.",[93,1054,1056],{"className":291,"code":1055,"language":293,"meta":99,"style":99},"\u003Ctemplate>\n  \u003CUContainer :ui=\"{ constrained: 'max-w-2xl' }\">\n    \u003Cslot />\n  \u003C/UContainer>\n\u003C/template>\n",[85,1057,1058,1066,1103,1112,1120],{"__ignoreMap":99},[103,1059,1060,1062,1064],{"class":105,"line":106},[103,1061,300],{"class":201},[103,1063,303],{"class":207},[103,1065,306],{"class":201},[103,1067,1068,1070,1073,1075,1077,1079,1081,1084,1087,1090,1092,1095,1097,1099,1101],{"class":105,"line":162},[103,1069,311],{"class":201},[103,1071,1072],{"class":207},"UContainer",[103,1074,317],{"class":201},[103,1076,1045],{"class":320},[103,1078,324],{"class":201},[103,1080,327],{"class":201},[103,1082,1083],{"class":201},"{ ",[103,1085,1086],{"class":207},"constrained",[103,1088,1089],{"class":201},": ",[103,1091,216],{"class":201},[103,1093,1094],{"class":112},"max-w-2xl",[103,1096,216],{"class":201},[103,1098,472],{"class":201},[103,1100,327],{"class":201},[103,1102,306],{"class":201},[103,1104,1105,1107,1110],{"class":105,"line":226},[103,1106,338],{"class":201},[103,1108,1109],{"class":207},"slot",[103,1111,393],{"class":201},[103,1113,1114,1116,1118],{"class":105,"line":365},[103,1115,409],{"class":201},[103,1117,1072],{"class":207},[103,1119,306],{"class":201},[103,1121,1122,1124,1126],{"class":105,"line":396},[103,1123,419],{"class":201},[103,1125,303],{"class":207},[103,1127,306],{"class":201},[1129,1130,1131],"note",{},[34,1132,1133,1134,1137],{},"You can find the default classes for each component under the ",[85,1135,1136],{},"Config"," section.",[38,1139,1141],{"id":1140},"dark-mode","Dark mode",[34,1143,1144],{},"All the components are styled with dark mode in mind.",[1146,1147],"u-color-mode-button",{},[38,1149,1150],{"id":637},"Icons",[34,1152,1153,1154,386],{},"You can use any icon (100,000+) from ",[244,1155,1158],{"href":1156,"rel":1157},"https://iconify.design/",[248],"Iconify",[34,1160,1161,1162,1164],{},"Some components have an ",[85,1163,346],{}," prop that allows you to add an icon to the component.",[93,1166,1168],{"className":291,"code":1167,"language":293,"meta":99,"style":99},"\u003Ctemplate>\n  \u003CUButton icon=\"i-lucide-search\" />\n\u003C/template>\n",[85,1169,1170,1178,1199],{"__ignoreMap":99},[103,1171,1172,1174,1176],{"class":105,"line":106},[103,1173,300],{"class":201},[103,1175,303],{"class":207},[103,1177,306],{"class":201},[103,1179,1180,1182,1185,1188,1190,1192,1195,1197],{"class":105,"line":162},[103,1181,311],{"class":201},[103,1183,1184],{"class":207},"UButton",[103,1186,1187],{"class":320}," icon",[103,1189,324],{"class":201},[103,1191,327],{"class":201},[103,1193,1194],{"class":112},"i-lucide-search",[103,1196,327],{"class":201},[103,1198,393],{"class":201},[103,1200,1201,1203,1205],{"class":105,"line":226},[103,1202,419],{"class":201},[103,1204,303],{"class":207},[103,1206,306],{"class":201},[30,1208,1210],{"id":1209},"here-are-some-components-you-can-use-but-there-are-many-others","Here are some components you can use... but there are many others !",[1212,1213,1214,1223,1230,1237,1244,1251],"card-group",{},[1215,1216,1220],"card",{"target":1217,"title":1218,"to":1219},"_blank","Accordion","https://ui.nuxt.com/components/accordion",[34,1221,1222],{},"Display togglable accordion panels.",[1215,1224,1227],{"target":1217,"title":1225,"to":1226},"Carousel","https://ui.nuxt.com/components/carousel",[34,1228,1229],{},"Display images or content in a scrollable area.",[1215,1231,1234],{"target":1217,"title":1232,"to":1233},"Command Palette","https://ui.nuxt.com/components/command-palette",[34,1235,1236],{},"Add a customizable command palette to your app.",[1215,1238,1241],{"target":1217,"title":1239,"to":1240},"Popover","https://ui.nuxt.com/components/popover",[34,1242,1243],{},"Display a non-modal dialog that floats around a trigger element.",[1215,1245,1248],{"target":1217,"title":1246,"to":1247},"Range","https://ui.nuxt.com/components/range",[34,1249,1250],{},"Display a range field",[1215,1252,1255],{"target":1217,"title":1253,"to":1254},"Table","https://ui.nuxt.com/components/table",[34,1256,1257],{},"Display data in a table.",[30,1259,1261],{"id":1260},"conclusion","Conclusion",[34,1263,1264,1265,250,1269,256,1272,1275],{},"Nuxt UI is the ",[1266,1267,1268],"strong",{},"perfect",[1266,1270,1271],{},"modular",[1266,1273,1274],{},"customizable"," UI library for creating websites in Nuxt. it allows you to create a beautiful website with incredible components (more than 45!)\nIn addition, the Pro version allows you to expand the range of components, it's a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.\nIt includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.",[1277,1278,1279],"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":99,"searchDepth":162,"depth":162,"links":1281},[1282,1285,1292,1298,1299],{"id":32,"depth":162,"text":10,"children":1283},[1284],{"id":40,"depth":226,"text":41},{"id":72,"depth":162,"text":73,"children":1286},[1287,1288,1289,1290,1291],{"id":76,"depth":226,"text":77},{"id":238,"depth":226,"text":239},{"id":277,"depth":226,"text":278},{"id":555,"depth":226,"text":556},{"id":576,"depth":226,"text":577},{"id":787,"depth":162,"text":788,"children":1293},[1294,1295,1296,1297],{"id":791,"depth":226,"text":792},{"id":949,"depth":226,"text":950},{"id":1140,"depth":226,"text":1141},{"id":637,"depth":226,"text":1150},{"id":1209,"depth":162,"text":1210},{"id":1260,"depth":162,"text":1261},"2023-10-19T00:00:00.000Z","Nuxt UI is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI","md",{"src":1304},"https://ui.nuxt.com/social-card.png",{},"/blog/nuxt-ui",{"title":17,"description":1301},"3.blog/7.nuxt-ui","09BFcnHum0DDJfAadnXNFe_Dk0u4AXosKnMBeIguyIY",[1311,1316],{"title":1312,"path":1313,"stem":1314,"description":1315,"children":-1},"The Rise of Cryptocurrencies","/blog/cryptocurrencies","3.blog/6.cryptocurrencies","Transforming Finance and Economy",null,1753837184765]