[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"versions":3,"module-ui":7},{"v3":4,"v4":5,"v2":6},"3.21.8","4.4.8","2.18.1",{"name":8,"description":9,"repo":10,"npm":11,"icon":12,"github":13,"website":14,"learn_more":15,"category":16,"type":17,"maintainers":18,"compatibility":28,"mcp":31,"generatedAt":32,"contributors":33,"stats":138,"readme":146},"ui","The Intuitive UI Library powered by Reka UI and Tailwind CSS.","nuxt/ui#dev","@nuxt/ui","nuxt.svg","https://github.com/nuxt/ui","https://ui.nuxt.com/docs/getting-started/installation/nuxt","","UI","official",[19,23],{"name":20,"github":21,"twitter":21,"bluesky":22},"Benjamin Canac","benjamincanac","benjamincanac.dev",{"name":24,"github":25,"twitter":26,"bluesky":27},"Sébastien Chopin","Atinux","atinux","atinux.com",{"nuxt":29,"requires":30},">=3.10.0",{},"https://ui.nuxt.com/mcp","2026-06-10T00:27:11.372Z",[34,37,41,45,48,52,56,60,63,67,71,75,79,83,87,91,94,98,102,105,109,112,115,118,122,125,129,132,135],{"id":35,"username":21,"contributions":36},739984,3898,{"id":38,"username":39,"contributions":40},25613751,"romhml",86,{"id":42,"username":43,"contributions":44},71938701,"HugoRCD",79,{"id":46,"username":26,"contributions":47},904724,71,{"id":49,"username":50,"contributions":51},7547335,"smarroufin",62,{"id":53,"username":54,"contributions":55},71264422,"J-Michalek",45,{"id":57,"username":58,"contributions":59},13056429,"sandros94",38,{"id":61,"username":62,"contributions":59},149865959,"hywax",{"id":64,"username":65,"contributions":66},1840026,"maximepvrt",33,{"id":68,"username":69,"contributions":70},48517781,"malik-jouda",32,{"id":72,"username":73,"contributions":74},28706372,"danielroe",29,{"id":76,"username":77,"contributions":78},37311945,"Haythamasalama",26,{"id":80,"username":81,"contributions":82},928780,"genu",22,{"id":84,"username":85,"contributions":86},45267552,"Barbapapazes",16,{"id":88,"username":89,"contributions":90},60952577,"rdjanuar",13,{"id":92,"username":93,"contributions":90},7356077,"connerblanton",{"id":95,"username":96,"contributions":97},11247099,"antfu",12,{"id":99,"username":100,"contributions":101},2047945,"farnabaz",9,{"id":103,"username":104,"contributions":101},41266342,"zAlweNy26",{"id":106,"username":107,"contributions":108},7290030,"larbish",7,{"id":110,"username":111,"contributions":108},3275920,"ivanmaxlogiudice",{"id":113,"username":114,"contributions":108},22576486,"mikenewbon",{"id":116,"username":117,"contributions":108},19751938,"noook",{"id":119,"username":120,"contributions":121},18414281,"KeJunMao",6,{"id":123,"username":124,"contributions":121},26260104,"eduayme",{"id":126,"username":127,"contributions":128},56732164,"ineshbose",5,{"id":130,"username":131,"contributions":128},5141911,"DarkGhostHunter",{"id":133,"username":134,"contributions":128},86230182,"MuhammadM1998",{"id":136,"username":137,"contributions":128},51054165,"Silver343",{"version":139,"downloads":140,"stars":141,"watchers":74,"forks":142,"defaultBranch":143,"publishedAt":144,"createdAt":145},"4.8.2",1441216,6638,1076,"v4",1780584371697,1639059438669,{"data":147,"body":148,"toc":837},{"title":15,"description":15},{"type":149,"children":150},"root",[151,179,185,231,263,304,311,324,330,353,466,472,485,494,503,512,518,535,545,554,565,577,583,598,606,621,630,638,646,657,663,668,690,716,722,736,742,815,820,832],{"type":152,"tag":153,"props":154,"children":155},"element","picture",{},[156,159,165,166,171,172],{"type":157,"value":158},"text","\n  ",{"type":152,"tag":160,"props":161,"children":164},"source",{"media":162,"srcSet":163},"(prefers-color-scheme: dark)","https://github.com/user-attachments/assets/91ceab67-89ce-4ef4-8678-4402a92baca5",[],{"type":157,"value":158},{"type":152,"tag":160,"props":167,"children":170},{"media":168,"srcSet":169},"(prefers-color-scheme: light)","https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27",[],{"type":157,"value":158},{"type":152,"tag":173,"props":174,"children":178},"img",{"alt":175,"width":176,"height":177,"src":169},"Nuxt UI",830,436,[],{"type":152,"tag":180,"props":181,"children":183},"h1",{"id":182},"nuxt-ui",[184],{"type":157,"value":175},{"type":152,"tag":186,"props":187,"children":188},"p",{},[189,201,211,221],{"type":152,"tag":190,"props":191,"children":195},"a",{"href":192,"rel":193},"https://npmjs.com/package/@nuxt/ui",[194],"nofollow",[196],{"type":152,"tag":173,"props":197,"children":200},{"alt":198,"src":199},"npm version","https://img.shields.io/npm/v/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":152,"tag":190,"props":202,"children":205},{"href":203,"rel":204},"https://npm.chart.dev/@nuxt/ui",[194],[206],{"type":152,"tag":173,"props":207,"children":210},{"alt":208,"src":209},"npm downloads","https://img.shields.io/npm/dm/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":152,"tag":190,"props":212,"children":215},{"href":213,"rel":214},"https://github.com/nuxt/ui/blob/v4/LICENSE.md",[194],[216],{"type":152,"tag":173,"props":217,"children":220},{"alt":218,"src":219},"License","https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":152,"tag":190,"props":222,"children":225},{"href":223,"rel":224},"https://nuxt.com",[194],[226],{"type":152,"tag":173,"props":227,"children":230},{"alt":228,"src":229},"Nuxt","https://img.shields.io/badge/Nuxt-18181B?logo=nuxt",[],{"type":152,"tag":186,"props":232,"children":233},{},[234,236,243,245,252,254,261],{"type":157,"value":235},"Nuxt UI harnesses the combined strengths of ",{"type":152,"tag":190,"props":237,"children":240},{"href":238,"rel":239},"https://reka-ui.com/",[194],[241],{"type":157,"value":242},"Reka UI",{"type":157,"value":244},", ",{"type":152,"tag":190,"props":246,"children":249},{"href":247,"rel":248},"https://tailwindcss.com/",[194],[250],{"type":157,"value":251},"Tailwind CSS",{"type":157,"value":253},", and ",{"type":152,"tag":190,"props":255,"children":258},{"href":256,"rel":257},"https://www.tailwind-variants.org/",[194],[259],{"type":157,"value":260},"Tailwind Variants",{"type":157,"value":262}," to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.",{"type":152,"tag":264,"props":265,"children":266},"blockquote",{},[267],{"type":152,"tag":186,"props":268,"children":269},{},[270,276,278,284,286,293,295,302],{"type":152,"tag":271,"props":272,"children":273},"span",{},[274],{"type":157,"value":275},"!NOTE",{"type":157,"value":277},"\nYou are on the ",{"type":152,"tag":279,"props":280,"children":282},"code",{"className":281},[],[283],{"type":157,"value":143},{"type":157,"value":285}," branch, check out the ",{"type":152,"tag":190,"props":287,"children":290},{"href":288,"rel":289},"https://github.com/nuxt/ui/tree/v3",[194],[291],{"type":157,"value":292},"v3 branch",{"type":157,"value":294}," for Nuxt UI v3 or ",{"type":152,"tag":190,"props":296,"children":299},{"href":297,"rel":298},"https://github.com/nuxt/ui/tree/v2",[194],[300],{"type":157,"value":301},"v2 branch",{"type":157,"value":303}," for Nuxt UI v2.",{"type":152,"tag":305,"props":306,"children":308},"h2",{"id":307},"documentation",[309],{"type":157,"value":310},"Documentation",{"type":152,"tag":186,"props":312,"children":313},{},[314,316,322],{"type":157,"value":315},"Visit ",{"type":152,"tag":190,"props":317,"children":320},{"href":318,"rel":319},"https://ui.nuxt.com",[194],[321],{"type":157,"value":318},{"type":157,"value":323}," to explore the documentation.",{"type":152,"tag":305,"props":325,"children":327},{"id":326},"templates",[328],{"type":157,"value":329},"Templates",{"type":152,"tag":186,"props":331,"children":332},{},[333,335,342,344,351],{"type":157,"value":334},"Kickstart your project with one of our ready-to-use Nuxt UI templates or follow the ",{"type":152,"tag":190,"props":336,"children":339},{"href":337,"rel":338},"https://ui.nuxt.com/getting-started/installation/nuxt",[194],[340],{"type":157,"value":341},"Installation Guide",{"type":157,"value":343},". Explore all available templates on the ",{"type":152,"tag":190,"props":345,"children":348},{"href":346,"rel":347},"https://ui.nuxt.com/templates",[194],[349],{"type":157,"value":350},"official templates page",{"type":157,"value":352},".",{"type":152,"tag":354,"props":355,"children":356},"ul",{},[357,370,382,394,406,418,430,442,454],{"type":152,"tag":358,"props":359,"children":360},"li",{},[361,368],{"type":152,"tag":190,"props":362,"children":365},{"href":363,"rel":364},"https://github.com/nuxt-ui-templates/starter",[194],[366],{"type":157,"value":367},"Starter",{"type":157,"value":369}," — A minimal template to get started with Nuxt UI.",{"type":152,"tag":358,"props":371,"children":372},{},[373,380],{"type":152,"tag":190,"props":374,"children":377},{"href":375,"rel":376},"https://github.com/nuxt-ui-templates/landing",[194],[378],{"type":157,"value":379},"Landing",{"type":157,"value":381}," — A modern landing page template powered by Nuxt Content.",{"type":152,"tag":358,"props":383,"children":384},{},[385,392],{"type":152,"tag":190,"props":386,"children":389},{"href":387,"rel":388},"https://github.com/nuxt-ui-templates/docs",[194],[390],{"type":157,"value":391},"Docs",{"type":157,"value":393}," — A documentation template powered by Nuxt Content.",{"type":152,"tag":358,"props":395,"children":396},{},[397,404],{"type":152,"tag":190,"props":398,"children":401},{"href":399,"rel":400},"https://github.com/nuxt-ui-templates/saas",[194],[402],{"type":157,"value":403},"SaaS",{"type":157,"value":405}," — A SaaS template with landing, pricing, docs and blog powered by Nuxt Content.",{"type":152,"tag":358,"props":407,"children":408},{},[409,416],{"type":152,"tag":190,"props":410,"children":413},{"href":411,"rel":412},"https://github.com/nuxt-ui-templates/dashboard",[194],[414],{"type":157,"value":415},"Dashboard",{"type":157,"value":417}," — A dashboard template with multi-column layout.",{"type":152,"tag":358,"props":419,"children":420},{},[421,428],{"type":152,"tag":190,"props":422,"children":425},{"href":423,"rel":424},"https://github.com/nuxt-ui-templates/chat",[194],[426],{"type":157,"value":427},"Chat",{"type":157,"value":429}," — An AI chatbot template with GitHub authentication and persistent chat history powered by Vercel AI SDK.",{"type":152,"tag":358,"props":431,"children":432},{},[433,440],{"type":152,"tag":190,"props":434,"children":437},{"href":435,"rel":436},"https://github.com/nuxt-ui-templates/portfolio",[194],[438],{"type":157,"value":439},"Portfolio",{"type":157,"value":441}," — A sleek portfolio template to showcase your work, skills and blog powered by Nuxt Content.",{"type":152,"tag":358,"props":443,"children":444},{},[445,452],{"type":152,"tag":190,"props":446,"children":449},{"href":447,"rel":448},"https://github.com/nuxt-ui-templates/changelog",[194],[450],{"type":157,"value":451},"Changelog",{"type":157,"value":453}," — A changelog template to display your repository releases notes from GitHub powered by Nuxt MDC.",{"type":152,"tag":358,"props":455,"children":456},{},[457,464],{"type":152,"tag":190,"props":458,"children":461},{"href":459,"rel":460},"https://github.com/nuxt-ui-templates/editor",[194],[462],{"type":157,"value":463},"Editor",{"type":157,"value":465}," — A rich text editor template powered by TipTap with support for markdown, HTML, and JSON content types.",{"type":152,"tag":305,"props":467,"children":469},{"id":468},"installation",[470],{"type":157,"value":471},"Installation",{"type":152,"tag":473,"props":474,"children":480},"pre",{"className":475,"code":476,"filename":477,"language":478,"meta":15,"style":479},"language-bash","pnpm add @nuxt/ui tailwindcss\n","pnpm","bash","undefined",[481],{"type":152,"tag":279,"props":482,"children":483},{"__ignoreMap":15},[484],{"type":157,"value":476},{"type":152,"tag":473,"props":486,"children":489},{"className":475,"code":487,"filename":488,"language":478,"meta":15,"style":479},"yarn add @nuxt/ui tailwindcss\n","yarn",[490],{"type":152,"tag":279,"props":491,"children":492},{"__ignoreMap":15},[493],{"type":157,"value":487},{"type":152,"tag":473,"props":495,"children":498},{"className":475,"code":496,"filename":497,"language":478,"meta":15,"style":479},"npm install @nuxt/ui tailwindcss\n","npm",[499],{"type":152,"tag":279,"props":500,"children":501},{"__ignoreMap":15},[502],{"type":157,"value":496},{"type":152,"tag":473,"props":504,"children":507},{"className":475,"code":505,"filename":506,"language":478,"meta":15,"style":479},"bun add @nuxt/ui tailwindcss\n","bun",[508],{"type":152,"tag":279,"props":509,"children":510},{"__ignoreMap":15},[511],{"type":157,"value":505},{"type":152,"tag":513,"props":514,"children":516},"h3",{"id":515},"nuxt",[517],{"type":157,"value":228},{"type":152,"tag":519,"props":520,"children":521},"ol",{},[522],{"type":152,"tag":358,"props":523,"children":524},{},[525,527,533],{"type":157,"value":526},"Add the Nuxt UI module in your ",{"type":152,"tag":279,"props":528,"children":530},{"className":529},[],[531],{"type":157,"value":532},"nuxt.config.ts",{"type":157,"value":534},":",{"type":152,"tag":473,"props":536,"children":540},{"className":537,"code":538,"filename":532,"language":539,"meta":15,"style":479},"language-ts","export default defineNuxtConfig({\n  modules: ['@nuxt/ui'],\n  css: ['~/assets/css/main.css']\n})\n","ts",[541],{"type":152,"tag":279,"props":542,"children":543},{"__ignoreMap":15},[544],{"type":157,"value":538},{"type":152,"tag":519,"props":546,"children":548},{"start":547},2,[549],{"type":152,"tag":358,"props":550,"children":551},{},[552],{"type":157,"value":553},"Import Tailwind CSS and Nuxt UI in your CSS:",{"type":152,"tag":473,"props":555,"children":560},{"className":556,"code":557,"filename":558,"language":559,"meta":15,"style":479},"language-css","@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n","app/assets/css/main.css","css",[561],{"type":152,"tag":279,"props":562,"children":563},{"__ignoreMap":15},[564],{"type":157,"value":557},{"type":152,"tag":186,"props":566,"children":567},{},[568,570,576],{"type":157,"value":569},"Learn more in the ",{"type":152,"tag":190,"props":571,"children":573},{"href":14,"rel":572},[194],[574],{"type":157,"value":575},"installation guide",{"type":157,"value":352},{"type":152,"tag":513,"props":578,"children":580},{"id":579},"vue",[581],{"type":157,"value":582},"Vue",{"type":152,"tag":519,"props":584,"children":585},{},[586],{"type":152,"tag":358,"props":587,"children":588},{},[589,591,597],{"type":157,"value":590},"Add the Nuxt UI Vite plugin in your ",{"type":152,"tag":279,"props":592,"children":594},{"className":593},[],[595],{"type":157,"value":596},"vite.config.ts",{"type":157,"value":534},{"type":152,"tag":473,"props":599,"children":601},{"className":537,"code":600,"filename":596,"language":539,"meta":15,"style":479},"import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport ui from '@nuxt/ui/vite'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    ui()\n  ]\n})\n",[602],{"type":152,"tag":279,"props":603,"children":604},{"__ignoreMap":15},[605],{"type":157,"value":600},{"type":152,"tag":519,"props":607,"children":608},{"start":547},[609],{"type":152,"tag":358,"props":610,"children":611},{},[612,614,620],{"type":157,"value":613},"Use the Nuxt UI Vue plugin in your ",{"type":152,"tag":279,"props":615,"children":617},{"className":616},[],[618],{"type":157,"value":619},"main.ts",{"type":157,"value":534},{"type":152,"tag":473,"props":622,"children":625},{"className":537,"code":623,"filename":624,"language":539,"meta":15,"style":479},"import './assets/css/main.css'\n\nimport { createApp } from 'vue'\nimport { createRouter, createWebHistory } from 'vue-router'\nimport ui from '@nuxt/ui/vue-plugin'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\nconst router = createRouter({\n  routes: [],\n  history: createWebHistory()\n})\n\napp.use(router)\napp.use(ui)\n\napp.mount('#app')\n","src/main.ts",[626],{"type":152,"tag":279,"props":627,"children":628},{"__ignoreMap":15},[629],{"type":157,"value":623},{"type":152,"tag":519,"props":631,"children":633},{"start":632},3,[634],{"type":152,"tag":358,"props":635,"children":636},{},[637],{"type":157,"value":553},{"type":152,"tag":473,"props":639,"children":641},{"className":556,"code":557,"filename":640,"language":559,"meta":15,"style":479},"src/assets/css/main.css",[642],{"type":152,"tag":279,"props":643,"children":644},{"__ignoreMap":15},[645],{"type":157,"value":557},{"type":152,"tag":186,"props":647,"children":648},{},[649,650,656],{"type":157,"value":569},{"type":152,"tag":190,"props":651,"children":654},{"href":652,"rel":653},"https://ui.nuxt.com/docs/getting-started/installation/vue",[194],[655],{"type":157,"value":575},{"type":157,"value":352},{"type":152,"tag":305,"props":658,"children":660},{"id":659},"contribution",[661],{"type":157,"value":662},"Contribution",{"type":152,"tag":186,"props":664,"children":665},{},[666],{"type":157,"value":667},"Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:",{"type":152,"tag":354,"props":669,"children":670},{},[671,676],{"type":152,"tag":358,"props":672,"children":673},{},[674],{"type":157,"value":675},"Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.",{"type":152,"tag":358,"props":677,"children":678},{},[679,681,688],{"type":157,"value":680},"Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the ",{"type":152,"tag":190,"props":682,"children":685},{"href":683,"rel":684},"https://ui.nuxt.com/docs/getting-started/contribution",[194],[686],{"type":157,"value":687},"contribution guide",{"type":157,"value":689}," to share your suggestions.",{"type":152,"tag":264,"props":691,"children":692},{},[693],{"type":152,"tag":186,"props":694,"children":695},{},[696,701,703,714],{"type":152,"tag":271,"props":697,"children":698},{},[699],{"type":157,"value":700},"!TIP",{"type":157,"value":702},"\nWe provide contributing guidelines through ",{"type":152,"tag":190,"props":704,"children":707},{"href":705,"rel":706},"https://github.com/nuxt/ui/blob/v4/AGENTS.md",[194],[708],{"type":152,"tag":279,"props":709,"children":711},{"className":710},[],[712],{"type":157,"value":713},"AGENTS.md",{"type":157,"value":715}," for AI assistants to help you contribute to Nuxt UI. It is automatically picked up by all AI coding agents and guides through component structure, theming patterns, testing conventions, and documentation guidelines.",{"type":152,"tag":305,"props":717,"children":719},{"id":718},"local-development",[720],{"type":157,"value":721},"Local Development",{"type":152,"tag":186,"props":723,"children":724},{},[725,727,734],{"type":157,"value":726},"Follow the docs to ",{"type":152,"tag":190,"props":728,"children":731},{"href":729,"rel":730},"https://ui.nuxt.com/docs/getting-started/contribution#local-development",[194],[732],{"type":157,"value":733},"set up your local development environment",{"type":157,"value":735}," and contribute.",{"type":152,"tag":305,"props":737,"children":739},{"id":738},"credits",[740],{"type":157,"value":741},"Credits",{"type":152,"tag":354,"props":743,"children":744},{},[745,755,765,775,785,795,805],{"type":152,"tag":358,"props":746,"children":747},{},[748],{"type":152,"tag":190,"props":749,"children":752},{"href":750,"rel":751},"https://github.com/nuxt/nuxt",[194],[753],{"type":157,"value":754},"nuxt/nuxt",{"type":152,"tag":358,"props":756,"children":757},{},[758],{"type":152,"tag":190,"props":759,"children":762},{"href":760,"rel":761},"https://github.com/nuxt/icon",[194],[763],{"type":157,"value":764},"nuxt/icon",{"type":152,"tag":358,"props":766,"children":767},{},[768],{"type":152,"tag":190,"props":769,"children":772},{"href":770,"rel":771},"https://github.com/nuxt/fonts",[194],[773],{"type":157,"value":774},"nuxt/fonts",{"type":152,"tag":358,"props":776,"children":777},{},[778],{"type":152,"tag":190,"props":779,"children":782},{"href":780,"rel":781},"https://github.com/nuxt-modules/color-mode",[194],[783],{"type":157,"value":784},"nuxt-modules/color-mode",{"type":152,"tag":358,"props":786,"children":787},{},[788],{"type":152,"tag":190,"props":789,"children":792},{"href":790,"rel":791},"https://github.com/unovue/reka-ui",[194],[793],{"type":157,"value":794},"unovue/reka-ui",{"type":152,"tag":358,"props":796,"children":797},{},[798],{"type":152,"tag":190,"props":799,"children":802},{"href":800,"rel":801},"https://github.com/tailwindlabs/tailwindcss",[194],[803],{"type":157,"value":804},"tailwindlabs/tailwindcss",{"type":152,"tag":358,"props":806,"children":807},{},[808],{"type":152,"tag":190,"props":809,"children":812},{"href":810,"rel":811},"https://github.com/vueuse/vueuse",[194],[813],{"type":157,"value":814},"vueuse/vueuse",{"type":152,"tag":305,"props":816,"children":818},{"id":817},"license",[819],{"type":157,"value":218},{"type":152,"tag":186,"props":821,"children":822},{},[823,825,831],{"type":157,"value":824},"Licensed under the ",{"type":152,"tag":190,"props":826,"children":828},{"href":213,"rel":827},[194],[829],{"type":157,"value":830},"MIT license",{"type":157,"value":352},{"type":152,"tag":833,"props":834,"children":835},"style",{},[836],{"type":157,"value":15},{"title":15,"searchDepth":547,"depth":547,"links":838},[839,840,841,845,846,847,848],{"id":307,"depth":547,"text":310},{"id":326,"depth":547,"text":329},{"id":468,"depth":547,"text":471,"children":842},[843,844],{"id":515,"depth":632,"text":228},{"id":579,"depth":632,"text":582},{"id":659,"depth":547,"text":662},{"id":718,"depth":547,"text":721},{"id":738,"depth":547,"text":741},{"id":817,"depth":547,"text":218}]