[{"data":1,"prerenderedAt":313},["ShallowReactive",2],{"mdc--e49voa-key":3},{"data":4,"body":5},{},{"type":6,"children":7},"root",[8,17,23,28,32,38,52,57,60,66,186,189,195,260,263,269,292,295,301],{"type":9,"tag":10,"props":11,"children":13},"element","h2",{"id":12},"why-we-built-this",[14],{"type":15,"value":16},"text","Why We Built This",{"type":9,"tag":18,"props":19,"children":20},"p",{},[21],{"type":15,"value":22},"Theming Nuxt UI should feel like picking colors, not editing config files. Too often, setting up a design-token system means copy-pasting snippets, toggling dark mode to catch mismatches, and rebuilding just to preview a single shade change.",{"type":9,"tag":18,"props":24,"children":25},{},[26],{"type":15,"value":27},"We wanted a tool where you could see your entire design system render across real components — instantly, in both color modes — and walk away with production-ready code you can paste straight into your project.",{"type":9,"tag":29,"props":30,"children":31},"hr",{},[],{"type":9,"tag":10,"props":33,"children":35},{"id":34},"your-theme-configured-visually",[36],{"type":15,"value":37},"Your Theme, Configured Visually",{"type":9,"tag":18,"props":39,"children":40},{},[41,43,50],{"type":15,"value":42},"Nuxt UI Theme Builder is a free, open-source application that lets you visually configure Nuxt UI v4 design tokens — semantic colors, neutral palette, border radius, font family, and per-mode shade overrides — then export the result as ",{"type":9,"tag":44,"props":45,"children":47},"code",{"className":46},[],[48],{"type":15,"value":49},"app.config.ts",{"type":15,"value":51},", CSS variables, or JSON.",{"type":9,"tag":18,"props":53,"children":54},{},[55],{"type":15,"value":56},"Every change is instantly previewed across 125+ real Nuxt UI components, layout blocks, and full-page templates so you can see exactly how your theme looks before shipping it.",{"type":9,"tag":29,"props":58,"children":59},{},[],{"type":9,"tag":10,"props":61,"children":63},{"id":62},"key-features",[64],{"type":15,"value":65},"Key Features",{"type":9,"tag":67,"props":68,"children":69},"ul",{},[70,82,99,109,119,129,139,149,159],{"type":9,"tag":71,"props":72,"children":73},"li",{},[74,80],{"type":9,"tag":75,"props":76,"children":77},"strong",{},[78],{"type":15,"value":79},"Live preview",{"type":15,"value":81}," — every component, block, and template re-renders in real time as you adjust tokens.",{"type":9,"tag":71,"props":83,"children":84},{},[85,90,92,97],{"type":9,"tag":75,"props":86,"children":87},{},[88],{"type":15,"value":89},"Multiple export formats",{"type":15,"value":91}," — drop the output straight into your project as ",{"type":9,"tag":44,"props":93,"children":95},{"className":94},[],[96],{"type":15,"value":49},{"type":15,"value":98},", a CSS snippet, or raw JSON.",{"type":9,"tag":71,"props":100,"children":101},{},[102,107],{"type":9,"tag":75,"props":103,"children":104},{},[105],{"type":15,"value":106},"Built-in presets",{"type":15,"value":108}," — start from curated themes and customize from there.",{"type":9,"tag":71,"props":110,"children":111},{},[112,117],{"type":9,"tag":75,"props":113,"children":114},{},[115],{"type":15,"value":116},"Undo \u002F Redo",{"type":15,"value":118}," — full history support so you can experiment freely.",{"type":9,"tag":71,"props":120,"children":121},{},[122,127],{"type":9,"tag":75,"props":123,"children":124},{},[125],{"type":15,"value":126},"Save & manage themes",{"type":15,"value":128}," — persist multiple themes locally and switch between them.",{"type":9,"tag":71,"props":130,"children":131},{},[132,137],{"type":9,"tag":75,"props":133,"children":134},{},[135],{"type":15,"value":136},"AI theme generation",{"type":15,"value":138}," — describe your design vision in plain language and let AI generate a complete starting point.",{"type":9,"tag":71,"props":140,"children":141},{},[142,147],{"type":9,"tag":75,"props":143,"children":144},{},[145],{"type":15,"value":146},"Dark & light mode",{"type":15,"value":148}," — separate shade overrides for each color mode.",{"type":9,"tag":71,"props":150,"children":151},{},[152,157],{"type":9,"tag":75,"props":153,"children":154},{},[155],{"type":15,"value":156},"No account required",{"type":15,"value":158}," — theme data stays in your browser. The only external calls are AI prompts, which go directly to the provider you choose (bring your own API key).",{"type":9,"tag":71,"props":160,"children":161},{},[162,167,169,176,178,184],{"type":9,"tag":75,"props":163,"children":164},{},[165],{"type":15,"value":166},"Learn & tooling",{"type":15,"value":168}," — browse ",{"type":9,"tag":170,"props":171,"children":173},"a",{"href":172},"\u002Flearn",[174],{"type":15,"value":175},"theming guides",{"type":15,"value":177}," and use built-in ",{"type":9,"tag":170,"props":179,"children":181},{"href":180},"\u002Ftools",[182],{"type":15,"value":183},"color tools",{"type":15,"value":185}," to support your design workflow.",{"type":9,"tag":29,"props":187,"children":188},{},[],{"type":9,"tag":10,"props":190,"children":192},{"id":191},"built-with",[193],{"type":15,"value":194},"Built With",{"type":9,"tag":67,"props":196,"children":197},{},[198,212,224,236,248],{"type":9,"tag":71,"props":199,"children":200},{},[201,210],{"type":9,"tag":170,"props":202,"children":207},{"href":203,"rel":204,"target":206},"https:\u002F\u002Fnuxt.com",[205],"nofollow","\\_blank",[208],{"type":15,"value":209},"Nuxt 4",{"type":15,"value":211}," — the Vue framework for full-stack web apps.",{"type":9,"tag":71,"props":213,"children":214},{},[215,222],{"type":9,"tag":170,"props":216,"children":219},{"href":217,"rel":218,"target":206},"https:\u002F\u002Fui.nuxt.com",[205],[220],{"type":15,"value":221},"Nuxt UI v4",{"type":15,"value":223}," — the component library whose tokens this tool configures.",{"type":9,"tag":71,"props":225,"children":226},{},[227,234],{"type":9,"tag":170,"props":228,"children":231},{"href":229,"rel":230,"target":206},"https:\u002F\u002Fpinia.vuejs.org",[205],[232],{"type":15,"value":233},"Pinia",{"type":15,"value":235}," — state management with persisted state and undo\u002Fredo.",{"type":9,"tag":71,"props":237,"children":238},{},[239,246],{"type":9,"tag":170,"props":240,"children":243},{"href":241,"rel":242,"target":206},"https:\u002F\u002Ftailwindcss.com",[205],[244],{"type":15,"value":245},"Tailwind CSS v4",{"type":15,"value":247}," — utility-first styling.",{"type":9,"tag":71,"props":249,"children":250},{},[251,258],{"type":9,"tag":170,"props":252,"children":255},{"href":253,"rel":254,"target":206},"https:\u002F\u002Fvueuse.org",[205],[256],{"type":15,"value":257},"VueUse",{"type":15,"value":259}," — essential Vue composition utilities.",{"type":9,"tag":29,"props":261,"children":262},{},[],{"type":9,"tag":10,"props":264,"children":266},{"id":265},"open-source",[267],{"type":15,"value":268},"Open Source",{"type":9,"tag":18,"props":270,"children":271},{},[272,274,281,283,290],{"type":15,"value":273},"This project is open source under the ",{"type":9,"tag":170,"props":275,"children":278},{"href":276,"rel":277,"target":206},"https:\u002F\u002Fgithub.com\u002Fmattycraig\u002Fnuxt-theme-builder\u002Fblob\u002Fmaster\u002FLICENSE",[205],[279],{"type":15,"value":280},"MIT License",{"type":15,"value":282},". Contributions of any kind — code, docs, design, ideas — are welcome. If the tool saves you time, consider ",{"type":9,"tag":170,"props":284,"children":287},{"href":285,"rel":286,"target":206},"https:\u002F\u002Fgithub.com\u002Fmattycraig\u002Fnuxt-theme-builder",[205],[288],{"type":15,"value":289},"giving it a star on GitHub",{"type":15,"value":291},".",{"type":9,"tag":29,"props":293,"children":294},{},[],{"type":9,"tag":10,"props":296,"children":298},{"id":297},"get-in-touch",[299],{"type":15,"value":300},"Get in Touch",{"type":9,"tag":18,"props":302,"children":303},{},[304,306,312],{"type":15,"value":305},"Have feedback, ideas, or questions? Visit our ",{"type":9,"tag":170,"props":307,"children":309},{"href":308},"\u002Fcontact",[310],{"type":15,"value":311},"contact page",{"type":15,"value":291},1773447658713]