[{"data":1,"prerenderedAt":1344},["ShallowReactive",2],{"mdc--i0u79e-key":3},{"data":4,"body":5},{},{"type":6,"children":7},"root",[8,17,35,40,119,123,129,134,228,240,243,249,270,402,407,410,416,428,434,439,452,469,475,480,537,554,560,573,590,593,599,611,617,658,670,676,727,746,749,755,766,772,790,796,801,861,864,870,881,886,889,895,900,939,951,954,960,988,1009,1014,1017,1023,1028,1078,1083,1086,1092,1104,1146,1151,1154,1160,1172,1231,1234,1240,1246,1259,1265,1278,1284,1304,1310,1328,1334,1339],{"type":9,"tag":10,"props":11,"children":13},"element","h2",{"id":12},"getting-started",[14],{"type":15,"value":16},"text","Getting Started",{"type":9,"tag":18,"props":19,"children":20},"p",{},[21,23,33],{"type":15,"value":22},"Design your perfect ",{"type":9,"tag":24,"props":25,"children":30},"a",{"href":26,"rel":27,"target":29},"https:\u002F\u002Fui.nuxt.com",[28],"nofollow","\\_blank",[31],{"type":15,"value":32},"Nuxt UI v4",{"type":15,"value":34}," theme in minutes — no guesswork, no trial-and-error deploys. Pick colors, tweak tokens, see the results live, and walk away with production-ready code.",{"type":9,"tag":18,"props":36,"children":37},{},[38],{"type":15,"value":39},"Here's the workflow:",{"type":9,"tag":41,"props":42,"children":43},"ol",{},[44,56,66,100],{"type":9,"tag":45,"props":46,"children":47},"li",{},[48,54],{"type":9,"tag":49,"props":50,"children":51},"strong",{},[52],{"type":15,"value":53},"Open the sidebar",{"type":15,"value":55}," — your theme editor lives in the collapsible left panel. Click the sidebar toggle or swipe from the left on mobile.",{"type":9,"tag":45,"props":57,"children":58},{},[59,64],{"type":9,"tag":49,"props":60,"children":61},{},[62],{"type":15,"value":63},"Tweak your design tokens",{"type":15,"value":65}," — pick semantic colors, adjust border radius, choose a font, and dial in shade overrides for light and dark modes.",{"type":9,"tag":45,"props":67,"children":68},{},[69,74,76,82,84,90,92,98],{"type":9,"tag":49,"props":70,"children":71},{},[72],{"type":15,"value":73},"See every change instantly",{"type":15,"value":75}," — the preview updates in real time. Navigate to ",{"type":9,"tag":24,"props":77,"children":79},{"href":78},"\u002Fcomponents",[80],{"type":15,"value":81},"Components",{"type":15,"value":83},", ",{"type":9,"tag":24,"props":85,"children":87},{"href":86},"\u002Fblocks",[88],{"type":15,"value":89},"Blocks",{"type":15,"value":91},", or ",{"type":9,"tag":24,"props":93,"children":95},{"href":94},"\u002Ftemplates",[96],{"type":15,"value":97},"Templates",{"type":15,"value":99}," to stress-test your theme across real UI patterns.",{"type":9,"tag":45,"props":101,"children":102},{},[103,108,110,117],{"type":9,"tag":49,"props":104,"children":105},{},[106],{"type":15,"value":107},"Export and ship",{"type":15,"value":109}," — grab your finished theme as ",{"type":9,"tag":111,"props":112,"children":114},"code",{"className":113},[],[115],{"type":15,"value":116},"app.config.ts",{"type":15,"value":118},", CSS custom properties, or JSON. Paste it into your project and you're done.",{"type":9,"tag":120,"props":121,"children":122},"hr",{},[],{"type":9,"tag":10,"props":124,"children":126},{"id":125},"editor-sidebar",[127],{"type":15,"value":128},"Editor Sidebar",{"type":9,"tag":18,"props":130,"children":131},{},[132],{"type":15,"value":133},"The sidebar organizes every design decision into collapsible sections — expand only what you need:",{"type":9,"tag":135,"props":136,"children":137},"ul",{},[138,148,158,168,178,188,198,208,218],{"type":9,"tag":45,"props":139,"children":140},{},[141,146],{"type":9,"tag":49,"props":142,"children":143},{},[144],{"type":15,"value":145},"My Themes",{"type":15,"value":147}," — Load, rename, duplicate, export, or delete your saved theme configurations.",{"type":9,"tag":45,"props":149,"children":150},{},[151,156],{"type":9,"tag":49,"props":152,"children":153},{},[154],{"type":15,"value":155},"Presets",{"type":15,"value":157}," — Start fast with a built-in preset like Ocean, Forest, or Sunset, then customize from there.",{"type":9,"tag":45,"props":159,"children":160},{},[161,166],{"type":9,"tag":49,"props":162,"children":163},{},[164],{"type":15,"value":165},"Color Mode",{"type":15,"value":167}," — Switch between light and dark mode to preview your theme in each context.",{"type":9,"tag":45,"props":169,"children":170},{},[171,176],{"type":9,"tag":49,"props":172,"children":173},{},[174],{"type":15,"value":175},"Layout",{"type":15,"value":177}," — Set the global border radius (in rem) and choose a font family.",{"type":9,"tag":45,"props":179,"children":180},{},[181,186],{"type":9,"tag":49,"props":182,"children":183},{},[184],{"type":15,"value":185},"Semantic Colors",{"type":15,"value":187}," — Assign a Tailwind color palette to each semantic slot: primary, secondary, success, info, warning, and error.",{"type":9,"tag":45,"props":189,"children":190},{},[191,196],{"type":9,"tag":49,"props":192,"children":193},{},[194],{"type":15,"value":195},"Neutral Color",{"type":15,"value":197}," — Pick the gray scale (slate, gray, zinc, neutral, stone) for text, backgrounds, and borders.",{"type":9,"tag":45,"props":199,"children":200},{},[201,206],{"type":9,"tag":49,"props":202,"children":203},{},[204],{"type":15,"value":205},"Text Colors",{"type":15,"value":207}," — Control which neutral shade maps to highlighted, default, muted, dimmed, and toned text tokens.",{"type":9,"tag":45,"props":209,"children":210},{},[211,216],{"type":9,"tag":49,"props":212,"children":213},{},[214],{"type":15,"value":215},"Background Colors",{"type":15,"value":217}," — Override neutral shades for default, elevated, accented, and inverted backgrounds.",{"type":9,"tag":45,"props":219,"children":220},{},[221,226],{"type":9,"tag":49,"props":222,"children":223},{},[224],{"type":15,"value":225},"Border Colors",{"type":15,"value":227}," — Override neutral shades for default and accented borders.",{"type":9,"tag":18,"props":229,"children":230},{},[231,233,238],{"type":15,"value":232},"Click any section header to expand or collapse it. The ",{"type":9,"tag":49,"props":234,"children":235},{},[236],{"type":15,"value":237},"expand\u002Fcollapse all",{"type":15,"value":239}," button in the toolbar toggles every section at once.",{"type":9,"tag":120,"props":241,"children":242},{},[],{"type":9,"tag":10,"props":244,"children":246},{"id":245},"keyboard-shortcuts",[247],{"type":15,"value":248},"Keyboard Shortcuts",{"type":9,"tag":18,"props":250,"children":251},{},[252,254,260,262,268],{"type":15,"value":253},"All shortcuts use ",{"type":9,"tag":111,"props":255,"children":257},{"className":256},[],[258],{"type":15,"value":259},"Ctrl",{"type":15,"value":261}," on Windows\u002FLinux and ",{"type":9,"tag":111,"props":263,"children":265},{"className":264},[],[266],{"type":15,"value":267},"⌘",{"type":15,"value":269}," on macOS.",{"type":9,"tag":271,"props":272,"children":273},"table",{},[274,293],{"type":9,"tag":275,"props":276,"children":277},"thead",{},[278],{"type":9,"tag":279,"props":280,"children":281},"tr",{},[282,288],{"type":9,"tag":283,"props":284,"children":285},"th",{},[286],{"type":15,"value":287},"Action",{"type":9,"tag":283,"props":289,"children":290},{},[291],{"type":15,"value":292},"Shortcut",{"type":9,"tag":294,"props":295,"children":296},"tbody",{},[297,322,351,374],{"type":9,"tag":279,"props":298,"children":299},{},[300,306],{"type":9,"tag":301,"props":302,"children":303},"td",{},[304],{"type":15,"value":305},"Undo",{"type":9,"tag":301,"props":307,"children":308},{},[309,314,316],{"type":9,"tag":111,"props":310,"children":312},{"className":311},[],[313],{"type":15,"value":259},{"type":15,"value":315}," + ",{"type":9,"tag":111,"props":317,"children":319},{"className":318},[],[320],{"type":15,"value":321},"Z",{"type":9,"tag":279,"props":323,"children":324},{},[325,330],{"type":9,"tag":301,"props":326,"children":327},{},[328],{"type":15,"value":329},"Redo",{"type":9,"tag":301,"props":331,"children":332},{},[333,338,339,345,346],{"type":9,"tag":111,"props":334,"children":336},{"className":335},[],[337],{"type":15,"value":259},{"type":15,"value":315},{"type":9,"tag":111,"props":340,"children":342},{"className":341},[],[343],{"type":15,"value":344},"Shift",{"type":15,"value":315},{"type":9,"tag":111,"props":347,"children":349},{"className":348},[],[350],{"type":15,"value":321},{"type":9,"tag":279,"props":352,"children":353},{},[354,359],{"type":9,"tag":301,"props":355,"children":356},{},[357],{"type":15,"value":358},"Quick-save (or Save As if unnamed)",{"type":9,"tag":301,"props":360,"children":361},{},[362,367,368],{"type":9,"tag":111,"props":363,"children":365},{"className":364},[],[366],{"type":15,"value":259},{"type":15,"value":315},{"type":9,"tag":111,"props":369,"children":371},{"className":370},[],[372],{"type":15,"value":373},"S",{"type":9,"tag":279,"props":375,"children":376},{},[377,382],{"type":9,"tag":301,"props":378,"children":379},{},[380],{"type":15,"value":381},"Save As new theme",{"type":9,"tag":301,"props":383,"children":384},{},[385,390,391,396,397],{"type":9,"tag":111,"props":386,"children":388},{"className":387},[],[389],{"type":15,"value":259},{"type":15,"value":315},{"type":9,"tag":111,"props":392,"children":394},{"className":393},[],[395],{"type":15,"value":344},{"type":15,"value":315},{"type":9,"tag":111,"props":398,"children":400},{"className":399},[],[401],{"type":15,"value":373},{"type":9,"tag":18,"props":403,"children":404},{},[405],{"type":15,"value":406},"Every token change is tracked. Undo goes back up to 50 steps. History resets when you load a preset or saved theme.",{"type":9,"tag":120,"props":408,"children":409},{},[],{"type":9,"tag":10,"props":411,"children":413},{"id":412},"exporting-your-theme",[414],{"type":15,"value":415},"Exporting Your Theme",{"type":9,"tag":18,"props":417,"children":418},{},[419,421,426],{"type":15,"value":420},"Click the ",{"type":9,"tag":49,"props":422,"children":423},{},[424],{"type":15,"value":425},"Export \u002F Import",{"type":15,"value":427}," button in the sidebar footer (or the toolbar on desktop) to open the export panel. Three formats are available — each with copy-to-clipboard and download buttons.",{"type":9,"tag":429,"props":430,"children":432},"h3",{"id":431},"appconfigts",[433],{"type":15,"value":116},{"type":9,"tag":18,"props":435,"children":436},{},[437],{"type":15,"value":438},"Produces a ready-to-paste Nuxt config block that maps your color choices to Nuxt UI's semantic slots:",{"type":9,"tag":440,"props":441,"children":447},"pre",{"className":442,"code":443,"language":444,"meta":445,"style":446},"language-ts","export default defineAppConfig({\n  ui: {\n    colors: {\n      primary: \"blue\",\n      secondary: \"violet\",\n      success: \"green\",\n      info: \"sky\",\n      warning: \"amber\",\n      error: \"red\",\n      neutral: \"slate\",\n    },\n  },\n});\n","ts","","undefined",[448],{"type":9,"tag":111,"props":449,"children":450},{"__ignoreMap":445},[451],{"type":15,"value":443},{"type":9,"tag":18,"props":453,"children":454},{},[455,460,462,467],{"type":9,"tag":49,"props":456,"children":457},{},[458],{"type":15,"value":459},"To use it:",{"type":15,"value":461}," drop this into your project's ",{"type":9,"tag":111,"props":463,"children":465},{"className":464},[],[466],{"type":15,"value":116},{"type":15,"value":468},". Nuxt UI reads these values at runtime and injects the CSS variables for you.",{"type":9,"tag":429,"props":470,"children":472},{"id":471},"css-custom-properties",[473],{"type":15,"value":474},"CSS Custom Properties",{"type":9,"tag":18,"props":476,"children":477},{},[478],{"type":15,"value":479},"Produces a complete stylesheet containing:",{"type":9,"tag":135,"props":481,"children":482},{},[483,494,515,526],{"type":9,"tag":45,"props":484,"children":485},{},[486,492],{"type":9,"tag":111,"props":487,"children":489},{"className":488},[],[490],{"type":15,"value":491},"@import",{"type":15,"value":493}," statements for Tailwind CSS v4 and Nuxt UI",{"type":9,"tag":45,"props":495,"children":496},{},[497,499,505,507,513],{"type":15,"value":498},"A ",{"type":9,"tag":111,"props":500,"children":502},{"className":501},[],[503],{"type":15,"value":504},"@theme",{"type":15,"value":506}," block for the ",{"type":9,"tag":111,"props":508,"children":510},{"className":509},[],[511],{"type":15,"value":512},"--font-sans",{"type":15,"value":514}," variable",{"type":9,"tag":45,"props":516,"children":517},{},[518,524],{"type":9,"tag":111,"props":519,"children":521},{"className":520},[],[522],{"type":15,"value":523},":root",{"type":15,"value":525}," overrides for light mode tokens (radius, text, backgrounds, borders)",{"type":9,"tag":45,"props":527,"children":528},{},[529,535],{"type":9,"tag":111,"props":530,"children":532},{"className":531},[],[533],{"type":15,"value":534},".dark",{"type":15,"value":536}," overrides for dark mode tokens",{"type":9,"tag":18,"props":538,"children":539},{},[540,544,546,552],{"type":9,"tag":49,"props":541,"children":542},{},[543],{"type":15,"value":459},{"type":15,"value":545}," replace or extend your project's ",{"type":9,"tag":111,"props":547,"children":549},{"className":548},[],[550],{"type":15,"value":551},"assets\u002Fcss\u002Fmain.css",{"type":15,"value":553},". Only non-default values are included, so the output stays minimal.",{"type":9,"tag":429,"props":555,"children":557},{"id":556},"json",[558],{"type":15,"value":559},"JSON",{"type":9,"tag":18,"props":561,"children":562},{},[563,565,571],{"type":15,"value":564},"Exports the full ",{"type":9,"tag":111,"props":566,"children":568},{"className":567},[],[569],{"type":15,"value":570},"ThemeConfig",{"type":15,"value":572}," object — every color, shade override, radius, and font setting in one file.",{"type":9,"tag":18,"props":574,"children":575},{},[576,580,582,588],{"type":9,"tag":49,"props":577,"children":578},{},[579],{"type":15,"value":459},{"type":15,"value":581}," save as ",{"type":9,"tag":111,"props":583,"children":585},{"className":584},[],[586],{"type":15,"value":587},"theme.json",{"type":15,"value":589}," to back up your work, share with teammates, or re-import later.",{"type":9,"tag":120,"props":591,"children":592},{},[],{"type":9,"tag":10,"props":594,"children":596},{"id":595},"importing-themes",[597],{"type":15,"value":598},"Importing Themes",{"type":9,"tag":18,"props":600,"children":601},{},[602,604,609],{"type":15,"value":603},"The Import section lives inside the same Export \u002F Import panel. Expand ",{"type":9,"tag":49,"props":605,"children":606},{},[607],{"type":15,"value":608},"Import Theme",{"type":15,"value":610}," to see two options:",{"type":9,"tag":429,"props":612,"children":614},{"id":613},"paste-json",[615],{"type":15,"value":616},"Paste JSON",{"type":9,"tag":41,"props":618,"children":619},{},[620,631,642,647],{"type":9,"tag":45,"props":621,"children":622},{},[623,625,629],{"type":15,"value":624},"Open the ",{"type":9,"tag":49,"props":626,"children":627},{},[628],{"type":15,"value":425},{"type":15,"value":630}," panel.",{"type":9,"tag":45,"props":632,"children":633},{},[634,636,640],{"type":15,"value":635},"Expand ",{"type":9,"tag":49,"props":637,"children":638},{},[639],{"type":15,"value":608},{"type":15,"value":641},".",{"type":9,"tag":45,"props":643,"children":644},{},[645],{"type":15,"value":646},"Paste your theme JSON into the text area.",{"type":9,"tag":45,"props":648,"children":649},{},[650,652,657],{"type":15,"value":651},"Click ",{"type":9,"tag":49,"props":653,"children":654},{},[655],{"type":15,"value":656},"Apply Theme",{"type":15,"value":641},{"type":9,"tag":18,"props":659,"children":660},{},[661,663,668],{"type":15,"value":662},"The JSON is validated against the ",{"type":9,"tag":111,"props":664,"children":666},{"className":665},[],[667],{"type":15,"value":570},{"type":15,"value":669}," schema. Invalid or missing fields trigger a clear error message so you know exactly what to fix.",{"type":9,"tag":429,"props":671,"children":673},{"id":672},"upload-a-file",[674],{"type":15,"value":675},"Upload a File",{"type":9,"tag":41,"props":677,"children":678},{},[679,688,697,716],{"type":9,"tag":45,"props":680,"children":681},{},[682,683,687],{"type":15,"value":624},{"type":9,"tag":49,"props":684,"children":685},{},[686],{"type":15,"value":425},{"type":15,"value":630},{"type":9,"tag":45,"props":689,"children":690},{},[691,692,696],{"type":15,"value":635},{"type":9,"tag":49,"props":693,"children":694},{},[695],{"type":15,"value":608},{"type":15,"value":641},{"type":9,"tag":45,"props":698,"children":699},{},[700,701,706,708,714],{"type":15,"value":651},{"type":9,"tag":49,"props":702,"children":703},{},[704],{"type":15,"value":705},"Browse file",{"type":15,"value":707}," and select a ",{"type":9,"tag":111,"props":709,"children":711},{"className":710},[],[712],{"type":15,"value":713},".json",{"type":15,"value":715}," file.",{"type":9,"tag":45,"props":717,"children":718},{},[719,721,725],{"type":15,"value":720},"The contents load automatically — click ",{"type":9,"tag":49,"props":722,"children":723},{},[724],{"type":15,"value":656},{"type":15,"value":726}," to apply.",{"type":9,"tag":18,"props":728,"children":729},{},[730,732,737,739,744],{"type":15,"value":731},"Only ",{"type":9,"tag":111,"props":733,"children":735},{"className":734},[],[736],{"type":15,"value":713},{"type":15,"value":738}," files are accepted. The file should match the same ",{"type":9,"tag":111,"props":740,"children":742},{"className":741},[],[743],{"type":15,"value":570},{"type":15,"value":745}," format that the JSON export produces.",{"type":9,"tag":120,"props":747,"children":748},{},[],{"type":9,"tag":10,"props":750,"children":752},{"id":751},"saving-and-managing-themes",[753],{"type":15,"value":754},"Saving and Managing Themes",{"type":9,"tag":18,"props":756,"children":757},{},[758,760,764],{"type":15,"value":759},"Save as many named themes as you like — they persist in your browser's localStorage and appear in the ",{"type":9,"tag":49,"props":761,"children":762},{},[763],{"type":15,"value":145},{"type":15,"value":765}," section of the sidebar.",{"type":9,"tag":429,"props":767,"children":769},{"id":768},"save-a-theme",[770],{"type":15,"value":771},"Save a Theme",{"type":9,"tag":18,"props":773,"children":774},{},[775,777,782,783,788],{"type":15,"value":776},"Press ",{"type":9,"tag":111,"props":778,"children":780},{"className":779},[],[781],{"type":15,"value":259},{"type":15,"value":315},{"type":9,"tag":111,"props":784,"children":786},{"className":785},[],[787],{"type":15,"value":373},{"type":15,"value":789}," or click the save icon in the toolbar. If you're editing an existing theme with unsaved changes, it quick-saves in place. Otherwise, a Save As dialog asks for a name.",{"type":9,"tag":429,"props":791,"children":793},{"id":792},"theme-actions",[794],{"type":15,"value":795},"Theme Actions",{"type":9,"tag":18,"props":797,"children":798},{},[799],{"type":15,"value":800},"Right-click (or use the context menu) on any saved theme to:",{"type":9,"tag":135,"props":802,"children":803},{},[804,814,824,834,851],{"type":9,"tag":45,"props":805,"children":806},{},[807,812],{"type":9,"tag":49,"props":808,"children":809},{},[810],{"type":15,"value":811},"Load",{"type":15,"value":813}," — apply it to the editor",{"type":9,"tag":45,"props":815,"children":816},{},[817,822],{"type":9,"tag":49,"props":818,"children":819},{},[820],{"type":15,"value":821},"Rename",{"type":15,"value":823}," — change its display name",{"type":9,"tag":45,"props":825,"children":826},{},[827,832],{"type":9,"tag":49,"props":828,"children":829},{},[830],{"type":15,"value":831},"Duplicate",{"type":15,"value":833}," — fork a copy to experiment with",{"type":9,"tag":45,"props":835,"children":836},{},[837,842,844,849],{"type":9,"tag":49,"props":838,"children":839},{},[840],{"type":15,"value":841},"Export JSON",{"type":15,"value":843}," — download it as a ",{"type":9,"tag":111,"props":845,"children":847},{"className":846},[],[848],{"type":15,"value":713},{"type":15,"value":850}," file",{"type":9,"tag":45,"props":852,"children":853},{},[854,859],{"type":9,"tag":49,"props":855,"children":856},{},[857],{"type":15,"value":858},"Delete",{"type":15,"value":860}," — remove it permanently (with confirmation)",{"type":9,"tag":120,"props":862,"children":863},{},[],{"type":9,"tag":10,"props":865,"children":867},{"id":866},"built-in-presets",[868],{"type":15,"value":869},"Built-in Presets",{"type":9,"tag":18,"props":871,"children":872},{},[873,875,879],{"type":15,"value":874},"Don't want to start from a blank canvas? The ",{"type":9,"tag":49,"props":876,"children":877},{},[878],{"type":15,"value":155},{"type":15,"value":880}," dropdown in the sidebar offers curated configurations like Ocean, Forest, Sunset, and more. Select one to load a complete theme instantly.",{"type":9,"tag":18,"props":882,"children":883},{},[884],{"type":15,"value":885},"Presets are a starting point, not a ceiling. Once loaded, change any token you like — your edits diverge from the preset. Save the result as a new named theme to keep your version.",{"type":9,"tag":120,"props":887,"children":888},{},[],{"type":9,"tag":10,"props":890,"children":892},{"id":891},"preview-pages",[893],{"type":15,"value":894},"Preview Pages",{"type":9,"tag":18,"props":896,"children":897},{},[898],{"type":15,"value":899},"The main content area renders a live, interactive preview of your theme. Navigate between three categories to see how your design holds up:",{"type":9,"tag":135,"props":901,"children":902},{},[903,915,927],{"type":9,"tag":45,"props":904,"children":905},{},[906,913],{"type":9,"tag":24,"props":907,"children":908},{"href":78},[909],{"type":9,"tag":49,"props":910,"children":911},{},[912],{"type":15,"value":81},{"type":15,"value":914}," — individual Nuxt UI components (buttons, cards, tables, inputs, and more) across all variants and sizes.",{"type":9,"tag":45,"props":916,"children":917},{},[918,925],{"type":9,"tag":24,"props":919,"children":920},{"href":86},[921],{"type":9,"tag":49,"props":922,"children":923},{},[924],{"type":15,"value":89},{"type":15,"value":926}," — layout sections like hero areas, feature grids, CTAs, testimonials, and FAQ.",{"type":9,"tag":45,"props":928,"children":929},{},[930,937],{"type":9,"tag":24,"props":931,"children":932},{"href":94},[933],{"type":9,"tag":49,"props":934,"children":935},{},[936],{"type":15,"value":97},{"type":15,"value":938}," — full page layouts including dashboards, blog, pricing, login, changelog, and beyond.",{"type":9,"tag":18,"props":940,"children":941},{},[942,944,949],{"type":15,"value":943},"Resize the preview viewport with the toolbar controls — desktop, tablet, and mobile presets, or enter a custom width. Toggle ",{"type":9,"tag":49,"props":945,"children":946},{},[947],{"type":15,"value":948},"Code",{"type":15,"value":950}," to view the source code of the current preview page.",{"type":9,"tag":120,"props":952,"children":953},{},[],{"type":9,"tag":10,"props":955,"children":957},{"id":956},"shade-overrides",[958],{"type":15,"value":959},"Shade Overrides",{"type":9,"tag":18,"props":961,"children":962},{},[963,965,971,972,978,980,986],{"type":15,"value":964},"Nuxt UI assigns specific neutral shades to semantic tokens like ",{"type":9,"tag":111,"props":966,"children":968},{"className":967},[],[969],{"type":15,"value":970},"--ui-text-muted",{"type":15,"value":83},{"type":9,"tag":111,"props":973,"children":975},{"className":974},[],[976],{"type":15,"value":977},"--ui-bg-elevated",{"type":15,"value":979},", and ",{"type":9,"tag":111,"props":981,"children":983},{"className":982},[],[984],{"type":15,"value":985},"--ui-border",{"type":15,"value":987},". The defaults work well, but sometimes you need more contrast or a subtler feel.",{"type":9,"tag":18,"props":989,"children":990},{},[991,993,997,998,1002,1003,1007],{"type":15,"value":992},"The ",{"type":9,"tag":49,"props":994,"children":995},{},[996],{"type":15,"value":205},{"type":15,"value":83},{"type":9,"tag":49,"props":999,"children":1000},{},[1001],{"type":15,"value":215},{"type":15,"value":979},{"type":9,"tag":49,"props":1004,"children":1005},{},[1006],{"type":15,"value":225},{"type":15,"value":1008}," sections let you override which shade maps to each token — independently for light and dark modes. You get precise control over contrast and readability without touching the underlying color palette.",{"type":9,"tag":18,"props":1010,"children":1011},{},[1012],{"type":15,"value":1013},"For example, if your light mode muted text looks too faint, bump it from shade 400 to 500. The CSS export only includes overrides that differ from Nuxt UI's defaults, keeping your output clean.",{"type":9,"tag":120,"props":1015,"children":1016},{},[],{"type":9,"tag":10,"props":1018,"children":1020},{"id":1019},"ai-theme-generation",[1021],{"type":15,"value":1022},"AI Theme Generation",{"type":9,"tag":18,"props":1024,"children":1025},{},[1026],{"type":15,"value":1027},"Don't know where to start? Describe your design vision in plain language and let AI generate a complete theme.",{"type":9,"tag":41,"props":1029,"children":1030},{},[1031,1048,1058,1068],{"type":9,"tag":45,"props":1032,"children":1033},{},[1034,1039,1041,1047],{"type":9,"tag":49,"props":1035,"children":1036},{},[1037],{"type":15,"value":1038},"Open the AI page",{"type":15,"value":1040}," — navigate to ",{"type":9,"tag":24,"props":1042,"children":1044},{"href":1043},"\u002Fai",[1045],{"type":15,"value":1046},"AI Theme Generator",{"type":15,"value":641},{"type":9,"tag":45,"props":1049,"children":1050},{},[1051,1056],{"type":9,"tag":49,"props":1052,"children":1053},{},[1054],{"type":15,"value":1055},"Choose a provider",{"type":15,"value":1057}," — select OpenAI, Anthropic, or Google and enter your API key. Keys are stored locally in your browser, never sent to our servers.",{"type":9,"tag":45,"props":1059,"children":1060},{},[1061,1066],{"type":9,"tag":49,"props":1062,"children":1063},{},[1064],{"type":15,"value":1065},"Describe your theme",{"type":15,"value":1067}," — type something like \"warm SaaS dashboard\" or \"neon cyberpunk\" and hit generate.",{"type":9,"tag":45,"props":1069,"children":1070},{},[1071,1076],{"type":9,"tag":49,"props":1072,"children":1073},{},[1074],{"type":15,"value":1075},"Review and refine",{"type":15,"value":1077}," — the generated theme loads into the editor. Every token is editable, so you keep full control.",{"type":9,"tag":18,"props":1079,"children":1080},{},[1081],{"type":15,"value":1082},"AI generation is BYOK (bring your own key). Prompts go directly from your browser to the provider — we never proxy or store them.",{"type":9,"tag":120,"props":1084,"children":1085},{},[],{"type":9,"tag":10,"props":1087,"children":1089},{"id":1088},"learn-and-guides",[1090],{"type":15,"value":1091},"Learn and Guides",{"type":9,"tag":18,"props":1093,"children":1094},{},[1095,1096,1102],{"type":15,"value":992},{"type":9,"tag":24,"props":1097,"children":1099},{"href":1098},"\u002Flearn",[1100],{"type":15,"value":1101},"Learn",{"type":15,"value":1103}," section contains in-depth guides for Nuxt UI theming:",{"type":9,"tag":135,"props":1105,"children":1106},{},[1107,1117,1127,1136],{"type":9,"tag":45,"props":1108,"children":1109},{},[1110,1115],{"type":9,"tag":49,"props":1111,"children":1112},{},[1113],{"type":15,"value":1114},"Theming",{"type":15,"value":1116}," — customize colors, configure dark mode, understand the CSS variable system, explore the full color palette reference, and pair fonts.",{"type":9,"tag":45,"props":1118,"children":1119},{},[1120,1125],{"type":9,"tag":49,"props":1121,"children":1122},{},[1123],{"type":15,"value":1124},"Tailwind CSS",{"type":15,"value":1126}," — learn how Tailwind CSS v4 integrates with Nuxt UI's design-token approach.",{"type":9,"tag":45,"props":1128,"children":1129},{},[1130,1134],{"type":9,"tag":49,"props":1131,"children":1132},{},[1133],{"type":15,"value":81},{"type":15,"value":1135}," — best practices for styling and composing Nuxt UI components.",{"type":9,"tag":45,"props":1137,"children":1138},{},[1139,1144],{"type":9,"tag":49,"props":1140,"children":1141},{},[1142],{"type":15,"value":1143},"Best practices",{"type":15,"value":1145}," — design-system fundamentals, accessibility, and maintenance tips.",{"type":9,"tag":18,"props":1147,"children":1148},{},[1149],{"type":15,"value":1150},"These guides complement the hands-on editor — read them for deeper understanding, use the editor to apply what you learn.",{"type":9,"tag":120,"props":1152,"children":1153},{},[],{"type":9,"tag":10,"props":1155,"children":1157},{"id":1156},"color-tools",[1158],{"type":15,"value":1159},"Color Tools",{"type":9,"tag":18,"props":1161,"children":1162},{},[1163,1164,1170],{"type":15,"value":992},{"type":9,"tag":24,"props":1165,"children":1167},{"href":1166},"\u002Ftools",[1168],{"type":15,"value":1169},"Tools",{"type":15,"value":1171}," section includes standalone utilities for color work:",{"type":9,"tag":135,"props":1173,"children":1174},{},[1175,1189,1203,1217],{"type":9,"tag":45,"props":1176,"children":1177},{},[1178,1187],{"type":9,"tag":24,"props":1179,"children":1181},{"href":1180},"\u002Ftools\u002Fcolor-converter",[1182],{"type":9,"tag":49,"props":1183,"children":1184},{},[1185],{"type":15,"value":1186},"Color Converter",{"type":15,"value":1188}," — convert between HEX, RGB, HSL, and other formats.",{"type":9,"tag":45,"props":1190,"children":1191},{},[1192,1201],{"type":9,"tag":24,"props":1193,"children":1195},{"href":1194},"\u002Ftools\u002Fcontrast-checker",[1196],{"type":9,"tag":49,"props":1197,"children":1198},{},[1199],{"type":15,"value":1200},"Contrast Checker",{"type":15,"value":1202}," — verify text\u002Fbackground contrast ratios against WCAG AA and AAA thresholds.",{"type":9,"tag":45,"props":1204,"children":1205},{},[1206,1215],{"type":9,"tag":24,"props":1207,"children":1209},{"href":1208},"\u002Ftools\u002Fpalette-generator",[1210],{"type":9,"tag":49,"props":1211,"children":1212},{},[1213],{"type":15,"value":1214},"Palette Generator",{"type":15,"value":1216}," — generate harmonious color palettes from a base color.",{"type":9,"tag":45,"props":1218,"children":1219},{},[1220,1229],{"type":9,"tag":24,"props":1221,"children":1223},{"href":1222},"\u002Ftools\u002Fpalette-viewer",[1224],{"type":9,"tag":49,"props":1225,"children":1226},{},[1227],{"type":15,"value":1228},"Palette Viewer",{"type":15,"value":1230}," — browse and compare the full set of Tailwind color palettes.",{"type":9,"tag":120,"props":1232,"children":1233},{},[],{"type":9,"tag":10,"props":1235,"children":1237},{"id":1236},"frequently-asked-questions",[1238],{"type":15,"value":1239},"Frequently Asked Questions",{"type":9,"tag":429,"props":1241,"children":1243},{"id":1242},"where-is-my-theme-stored",[1244],{"type":15,"value":1245},"Where is my theme stored?",{"type":9,"tag":18,"props":1247,"children":1248},{},[1249,1251,1257],{"type":15,"value":1250},"In your browser's localStorage under the ",{"type":9,"tag":111,"props":1252,"children":1254},{"className":1253},[],[1255],{"type":15,"value":1256},"theme",{"type":15,"value":1258}," key. It persists across page reloads and browser restarts — but it's local to your device and browser. Export your theme regularly to back it up or move it to another machine.",{"type":9,"tag":429,"props":1260,"children":1262},{"id":1261},"does-this-work-with-nuxt-ui-v3",[1263],{"type":15,"value":1264},"Does this work with Nuxt UI v3?",{"type":9,"tag":18,"props":1266,"children":1267},{},[1268,1270,1276],{"type":15,"value":1269},"This tool targets Nuxt UI v4 (Tailwind CSS v4, new theming system). The exported CSS variables and ",{"type":9,"tag":111,"props":1271,"children":1273},{"className":1272},[],[1274],{"type":15,"value":1275},"app.config",{"type":15,"value":1277}," format are v4-specific. You can use the JSON export as a reference for v3 projects, but the token names differ.",{"type":9,"tag":429,"props":1279,"children":1281},{"id":1280},"can-i-use-the-exported-css-without-nuxt",[1282],{"type":15,"value":1283},"Can I use the exported CSS without Nuxt?",{"type":9,"tag":18,"props":1285,"children":1286},{},[1287,1289,1295,1296,1302],{"type":15,"value":1288},"Yes. If you run Nuxt UI in a plain Vue app (without the Nuxt framework), the CSS output still applies — just adjust the import paths. The custom properties (",{"type":9,"tag":111,"props":1290,"children":1292},{"className":1291},[],[1293],{"type":15,"value":1294},"--ui-radius",{"type":15,"value":83},{"type":9,"tag":111,"props":1297,"children":1299},{"className":1298},[],[1300],{"type":15,"value":1301},"--ui-text-*",{"type":15,"value":1303},", etc.) follow Nuxt UI's token convention regardless of your build setup.",{"type":9,"tag":429,"props":1305,"children":1307},{"id":1306},"how-do-i-reset-everything",[1308],{"type":15,"value":1309},"How do I reset everything?",{"type":9,"tag":18,"props":1311,"children":1312},{},[1313,1314,1319,1321,1326],{"type":15,"value":651},{"type":9,"tag":49,"props":1315,"children":1316},{},[1317],{"type":15,"value":1318},"Reset to defaults",{"type":15,"value":1320}," in the sidebar toolbar to revert all tokens to their initial values. For a complete clean slate, clear the ",{"type":9,"tag":111,"props":1322,"children":1324},{"className":1323},[],[1325],{"type":15,"value":1256},{"type":15,"value":1327}," key from localStorage via DevTools → Application → Local Storage.",{"type":9,"tag":429,"props":1329,"children":1331},{"id":1330},"can-i-share-a-theme-with-a-link",[1332],{"type":15,"value":1333},"Can I share a theme with a link?",{"type":9,"tag":18,"props":1335,"children":1336},{},[1337],{"type":15,"value":1338},"Not via URL at this time. Export your theme as JSON, share the file, and the recipient can import it through the Import panel.",{"type":9,"tag":1340,"props":1341,"children":1342},"style",{},[1343],{"type":15,"value":445},1773447658713]