[{"data":1,"prerenderedAt":3728},["ShallowReactive",2],{"navigation":3,"-docs-getting-started-theme-css-variables":899,"-docs-getting-started-theme-css-variables-description":3720},[4],{"title":5,"path":6,"stem":7,"children":8,"page":36},"Docs","/docs","docs",[9,157,777,798],{"title":10,"path":11,"stem":12,"children":13,"framework":16,"category":16,"description":16,"icon":30},"Get Started","/docs/getting-started","docs/1.getting-started/1.index",[14,19,37,47,53,76,140],{"title":15,"path":11,"stem":12,"framework":16,"category":16,"description":17,"icon":18},"Introduction",null,"Nuxt UI is a comprehensive UI library for Vue and Nuxt applications, offering a collection of fully styled and accessible components.","i-lucide-house",{"title":20,"framework":16,"category":16,"description":16,"shadow":21,"path":22,"stem":23,"children":24,"page":36},"Installation",true,"/docs/getting-started/installation","docs/1.getting-started/2.installation",[25,31],{"title":20,"path":26,"stem":27,"framework":28,"category":16,"description":29,"icon":30},"/docs/getting-started/installation/nuxt","docs/1.getting-started/2.installation/1.nuxt","nuxt","Learn how to install and configure Nuxt UI in your Nuxt application.","i-lucide-square-play",{"title":20,"path":32,"stem":33,"framework":34,"category":16,"description":35,"icon":30},"/docs/getting-started/installation/vue","docs/1.getting-started/2.installation/2.vue","vue","Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.",false,{"title":38,"framework":16,"category":16,"description":16,"icon":39,"shadow":21,"path":40,"stem":41,"children":42,"page":36},"Migration","i-lucide-arrow-right-left","/docs/getting-started/migration","docs/1.getting-started/3.migration",[43],{"title":38,"path":44,"stem":45,"framework":16,"category":16,"description":46,"icon":39},"/docs/getting-started/migration/v4","docs/1.getting-started/3.migration/1.v4","A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.",{"title":48,"path":49,"stem":50,"framework":16,"category":16,"description":51,"icon":52},"Contribution","/docs/getting-started/contribution","docs/1.getting-started/4.contribution","A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.","i-lucide-handshake",{"title":54,"path":55,"stem":56,"children":57,"page":36},"Theme","/docs/getting-started/theme","docs/1.getting-started/5.theme",[58,64,70],{"title":59,"path":60,"stem":61,"framework":16,"category":16,"description":62,"icon":63},"Design System","/docs/getting-started/theme/design-system","docs/1.getting-started/5.theme/1.design-system","Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.","i-lucide-palette",{"title":65,"path":66,"stem":67,"framework":16,"category":16,"description":68,"icon":69},"CSS Variables","/docs/getting-started/theme/css-variables","docs/1.getting-started/5.theme/2.css-variables","Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.","i-lucide-swatch-book",{"title":71,"path":72,"stem":73,"framework":16,"category":16,"description":74,"icon":75},"Components","/docs/getting-started/theme/components","docs/1.getting-started/5.theme/3.components","Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.","i-lucide-layout-grid",{"title":77,"framework":16,"category":16,"description":16,"path":78,"stem":79,"children":80,"page":36},"Integrations","/docs/getting-started/integrations","docs/1.getting-started/6.integrations",[81,95,101,115,129,135],{"title":82,"framework":16,"category":16,"description":16,"shadow":21,"path":83,"stem":84,"children":85,"page":36},"Icons","/docs/getting-started/integrations/icons","docs/1.getting-started/6.integrations/1.icons",[86,91],{"title":82,"path":87,"stem":88,"framework":28,"category":16,"description":89,"icon":90},"/docs/getting-started/integrations/icons/nuxt","docs/1.getting-started/6.integrations/1.icons/1.nuxt","Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.","i-lucide-smile",{"title":82,"path":92,"stem":93,"framework":34,"category":16,"description":94,"icon":90},"/docs/getting-started/integrations/icons/vue","docs/1.getting-started/6.integrations/1.icons/2.vue","Nuxt UI integrates with Iconify to access over 200,000+ icons.",{"title":96,"path":97,"stem":98,"framework":28,"category":16,"description":99,"icon":100},"Fonts","/docs/getting-started/integrations/fonts","docs/1.getting-started/6.integrations/2.fonts","Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.","i-lucide-a-large-small",{"title":102,"framework":16,"category":16,"description":16,"shadow":21,"path":103,"stem":104,"children":105,"page":36},"Color Mode","/docs/getting-started/integrations/color-mode","docs/1.getting-started/6.integrations/3.color-mode",[106,111],{"title":102,"path":107,"stem":108,"framework":28,"category":16,"description":109,"icon":110},"/docs/getting-started/integrations/color-mode/nuxt","docs/1.getting-started/6.integrations/3.color-mode/1.nuxt","Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.","i-lucide-sun-moon",{"title":102,"path":112,"stem":113,"framework":34,"category":16,"description":114,"icon":110},"/docs/getting-started/integrations/color-mode/vue","docs/1.getting-started/6.integrations/3.color-mode/2.vue","Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.",{"title":116,"framework":16,"category":16,"description":16,"shadow":21,"path":117,"stem":118,"children":119,"page":36},"I18n","/docs/getting-started/integrations/i18n","docs/1.getting-started/6.integrations/4.i18n",[120,126],{"title":121,"path":122,"stem":123,"framework":28,"category":16,"description":124,"icon":125},"Internationalization (i18n)","/docs/getting-started/integrations/i18n/nuxt","docs/1.getting-started/6.integrations/4.i18n/1.nuxt","Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.","i-lucide-languages",{"title":121,"path":127,"stem":128,"framework":34,"category":16,"description":124,"icon":125},"/docs/getting-started/integrations/i18n/vue","docs/1.getting-started/6.integrations/4.i18n/2.vue",{"title":130,"path":131,"stem":132,"framework":28,"category":16,"description":133,"icon":134},"Content","/docs/getting-started/integrations/content","docs/1.getting-started/6.integrations/5.content","Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.","i-simple-icons-markdown",{"title":136,"path":137,"stem":138,"framework":34,"category":16,"description":139,"icon":134},"SSR","/docs/getting-started/integrations/ssr","docs/1.getting-started/6.integrations/6.ssr","Nuxt UI have first-party support for Vue.js SSR. This guide will help you have it fully enabled.",{"title":141,"framework":16,"category":16,"description":16,"path":142,"stem":143,"children":144,"page":36},"AI Tools","/docs/getting-started/ai","docs/1.getting-started/7.ai",[145,151],{"title":146,"path":147,"stem":148,"framework":16,"category":16,"description":149,"icon":150},"MCP Server","/docs/getting-started/ai/mcp","docs/1.getting-started/7.ai/1.mcp","Use Nuxt UI components in your AI assistants with Model Context Protocol support.","i-lucide-server",{"title":152,"path":153,"stem":154,"framework":16,"category":16,"description":155,"icon":156},"LLMs.txt","/docs/getting-started/ai/llms-txt","docs/1.getting-started/7.ai/2.llms-txt","How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, theming, and best practices.","i-lucide-bot",{"title":71,"framework":16,"category":16,"description":16,"icon":158,"path":159,"stem":160,"children":161,"page":36},"i-lucide-square-code","/docs/components","docs/2.components",[162,168,174,180,186,191,196,201,206,211,216,222,227,232,237,242,247,252,258,263,268,273,278,284,289,294,299,305,310,315,320,325,330,335,340,346,351,356,361,366,372,378,383,388,393,398,403,408,413,418,423,428,433,440,445,450,455,460,465,470,475,480,485,490,495,500,505,510,515,520,526,531,536,541,546,551,556,562,567,572,577,582,587,592,597,602,607,612,617,622,627,632,637,642,647,652,657,662,667,672,677,682,687,692,697,702,707,712,717,722,727,732,737,742,747,752,757,762,767,772],{"title":163,"path":164,"stem":165,"framework":16,"category":166,"description":167},"Accordion","/docs/components/accordion","docs/2.components/accordion","data","A stacked set of collapsible panels.",{"title":169,"path":170,"stem":171,"framework":16,"category":172,"description":173},"Alert","/docs/components/alert","docs/2.components/alert","element","A callout to draw user's attention.",{"title":175,"path":176,"stem":177,"framework":16,"category":178,"description":179},"App","/docs/components/app","docs/2.components/app","layout","Wraps your app to provide global configurations and more.",{"title":181,"path":182,"stem":183,"framework":16,"category":184,"description":185},"AuthForm","/docs/components/auth-form","docs/2.components/auth-form","page","A customizable Form to create login, register or password reset forms.",{"title":187,"path":188,"stem":189,"framework":16,"category":172,"description":190},"Avatar","/docs/components/avatar","docs/2.components/avatar","An img element with fallback and Nuxt Image support.",{"title":192,"path":193,"stem":194,"framework":16,"category":172,"description":195},"AvatarGroup","/docs/components/avatar-group","docs/2.components/avatar-group","Stack multiple avatars in a group.",{"title":197,"path":198,"stem":199,"framework":16,"category":172,"description":200},"Badge","/docs/components/badge","docs/2.components/badge","A short text to represent a status or a category.",{"title":202,"path":203,"stem":204,"framework":16,"category":172,"description":205},"Banner","/docs/components/banner","docs/2.components/banner","Display a banner at the top of your website to inform users about important information.",{"title":207,"path":208,"stem":209,"framework":16,"category":184,"description":210},"BlogPost","/docs/components/blog-post","docs/2.components/blog-post","A customizable article to display in a blog page.",{"title":212,"path":213,"stem":214,"framework":16,"category":184,"description":215},"BlogPosts","/docs/components/blog-posts","docs/2.components/blog-posts","Display a list of blog posts in a responsive grid layout.",{"title":217,"path":218,"stem":219,"framework":16,"category":220,"description":221},"Breadcrumb","/docs/components/breadcrumb","docs/2.components/breadcrumb","navigation","A hierarchy of links to navigate through a website.",{"title":223,"path":224,"stem":225,"framework":16,"category":172,"description":226},"Button","/docs/components/button","docs/2.components/button","A button element that can act as a link or trigger an action.",{"title":228,"path":229,"stem":230,"framework":16,"category":172,"description":231},"Calendar","/docs/components/calendar","docs/2.components/calendar","A calendar component for selecting single dates, multiple dates or date ranges.",{"title":233,"path":234,"stem":235,"framework":16,"category":172,"description":236},"Card","/docs/components/card","docs/2.components/card","Display content in a card with a header, body and footer.",{"title":238,"path":239,"stem":240,"framework":16,"category":166,"description":241},"Carousel","/docs/components/carousel","docs/2.components/carousel","A carousel with motion and swipe built using Embla.",{"title":243,"path":244,"stem":245,"framework":16,"category":184,"description":246},"ChangelogVersion","/docs/components/changelog-version","docs/2.components/changelog-version","A customizable article to display in a changelog.",{"title":248,"path":249,"stem":250,"framework":16,"category":184,"description":251},"ChangelogVersions","/docs/components/changelog-versions","docs/2.components/changelog-versions","Display a list of changelog versions in a timeline.",{"title":253,"path":254,"stem":255,"framework":16,"category":256,"description":257},"ChatMessage","/docs/components/chat-message","docs/2.components/chat-message","chat","Display a chat message with icon, avatar, and actions.",{"title":259,"path":260,"stem":261,"framework":16,"category":256,"description":262},"ChatMessages","/docs/components/chat-messages","docs/2.components/chat-messages","Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.",{"title":264,"path":265,"stem":266,"framework":16,"category":256,"description":267},"ChatPalette","/docs/components/chat-palette","docs/2.components/chat-palette","A chat palette to create a chatbot interface inside an overlay.",{"title":269,"path":270,"stem":271,"framework":16,"category":256,"description":272},"ChatPrompt","/docs/components/chat-prompt","docs/2.components/chat-prompt","An enhanced Textarea for submitting prompts in AI chat interfaces.",{"title":274,"path":275,"stem":276,"framework":16,"category":256,"description":277},"ChatPromptSubmit","/docs/components/chat-prompt-submit","docs/2.components/chat-prompt-submit","A Button for submitting chat prompts with automatic status handling.",{"title":279,"path":280,"stem":281,"framework":16,"category":282,"description":283},"Checkbox","/docs/components/checkbox","docs/2.components/checkbox","form","An input element to toggle between checked and unchecked states.",{"title":285,"path":286,"stem":287,"framework":16,"category":282,"description":288},"CheckboxGroup","/docs/components/checkbox-group","docs/2.components/checkbox-group","A set of checklist buttons to select multiple option from a list.",{"title":290,"path":291,"stem":292,"framework":16,"category":172,"description":293},"Chip","/docs/components/chip","docs/2.components/chip","An indicator of a numeric value or a state.",{"title":295,"path":296,"stem":297,"framework":16,"category":172,"description":298},"Collapsible","/docs/components/collapsible","docs/2.components/collapsible","A collapsible element to toggle visibility of its content.",{"title":300,"path":301,"stem":302,"framework":16,"category":303,"description":304},"ColorModeAvatar","/docs/components/color-mode-avatar","docs/2.components/color-mode-avatar","color-mode","An Avatar with a different source for light and dark mode.",{"title":306,"path":307,"stem":308,"framework":16,"category":303,"description":309},"ColorModeButton","/docs/components/color-mode-button","docs/2.components/color-mode-button","A Button to switch between light and dark mode.",{"title":311,"path":312,"stem":313,"framework":16,"category":303,"description":314},"ColorModeImage","/docs/components/color-mode-image","docs/2.components/color-mode-image","An image element with a different source for light and dark mode.",{"title":316,"path":317,"stem":318,"framework":16,"category":303,"description":319},"ColorModeSelect","/docs/components/color-mode-select","docs/2.components/color-mode-select","A Select to switch between system, dark & light mode.",{"title":321,"path":322,"stem":323,"framework":16,"category":303,"description":324},"ColorModeSwitch","/docs/components/color-mode-switch","docs/2.components/color-mode-switch","A switch to toggle between light and dark mode.",{"title":326,"path":327,"stem":328,"framework":16,"category":282,"description":329},"ColorPicker","/docs/components/color-picker","docs/2.components/color-picker","A component to select a color.",{"title":331,"path":332,"stem":333,"framework":16,"category":220,"description":334},"CommandPalette","/docs/components/command-palette","docs/2.components/command-palette","A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.",{"title":336,"path":337,"stem":338,"framework":16,"category":178,"description":339},"Container","/docs/components/container","docs/2.components/container","A container lets you center and constrain the width of your content.",{"title":341,"path":342,"stem":343,"framework":28,"category":344,"description":345},"ContentNavigation","/docs/components/content-navigation","docs/2.components/content-navigation","content","An accordion-style navigation component for organizing page links.",{"title":347,"path":348,"stem":349,"framework":28,"category":344,"description":350},"ContentSearch","/docs/components/content-search","docs/2.components/content-search","A ready to use CommandPalette to add to your documentation.",{"title":352,"path":353,"stem":354,"framework":28,"category":344,"description":355},"ContentSearchButton","/docs/components/content-search-button","docs/2.components/content-search-button","A pre-styled Button to open the ContentSearch modal.",{"title":357,"path":358,"stem":359,"framework":28,"category":344,"description":360},"ContentSurround","/docs/components/content-surround","docs/2.components/content-surround","A pair of prev and next links to navigate between pages.",{"title":362,"path":363,"stem":364,"framework":28,"category":344,"description":365},"ContentToc","/docs/components/content-toc","docs/2.components/content-toc","A sticky Table of Contents with automatic active anchor link highlighting.",{"title":367,"path":368,"stem":369,"framework":16,"category":370,"description":371},"ContextMenu","/docs/components/context-menu","docs/2.components/context-menu","overlay","A menu to display actions when right-clicking on an element.",{"title":373,"path":374,"stem":375,"framework":16,"category":376,"description":377},"DashboardGroup","/docs/components/dashboard-group","docs/2.components/dashboard-group","dashboard","A fixed layout component that provides context for dashboard components with sidebar state management and persistence.",{"title":379,"path":380,"stem":381,"framework":16,"category":376,"description":382},"DashboardNavbar","/docs/components/dashboard-navbar","docs/2.components/dashboard-navbar","A responsive navbar to display in a dashboard.",{"title":384,"path":385,"stem":386,"framework":16,"category":376,"description":387},"DashboardPanel","/docs/components/dashboard-panel","docs/2.components/dashboard-panel","A resizable panel to display in a dashboard.",{"title":389,"path":390,"stem":391,"framework":16,"category":376,"description":392},"DashboardResizeHandle","/docs/components/dashboard-resize-handle","docs/2.components/dashboard-resize-handle","A handle to resize a sidebar or panel.",{"title":394,"path":395,"stem":396,"framework":16,"category":376,"description":397},"DashboardSearch","/docs/components/dashboard-search","docs/2.components/dashboard-search","A ready to use CommandPalette to add to your dashboard.",{"title":399,"path":400,"stem":401,"framework":16,"category":376,"description":402},"DashboardSearchButton","/docs/components/dashboard-search-button","docs/2.components/dashboard-search-button","A pre-styled Button to open the DashboardSearch modal.",{"title":404,"path":405,"stem":406,"framework":16,"category":376,"description":407},"DashboardSidebar","/docs/components/dashboard-sidebar","docs/2.components/dashboard-sidebar","A resizable and collapsible sidebar to display in a dashboard.",{"title":409,"path":410,"stem":411,"framework":16,"category":376,"description":412},"DashboardSidebarCollapse","/docs/components/dashboard-sidebar-collapse","docs/2.components/dashboard-sidebar-collapse","A Button to collapse the sidebar on desktop.",{"title":414,"path":415,"stem":416,"framework":16,"category":376,"description":417},"DashboardSidebarToggle","/docs/components/dashboard-sidebar-toggle","docs/2.components/dashboard-sidebar-toggle","A Button to toggle the sidebar on mobile.",{"title":419,"path":420,"stem":421,"framework":16,"category":376,"description":422},"DashboardToolbar","/docs/components/dashboard-toolbar","docs/2.components/dashboard-toolbar","A toolbar to display under the navbar in a dashboard.",{"title":424,"path":425,"stem":426,"framework":16,"category":370,"description":427},"Drawer","/docs/components/drawer","docs/2.components/drawer","A drawer that smoothly slides in & out of the screen.",{"title":429,"path":430,"stem":431,"framework":16,"category":370,"description":432},"DropdownMenu","/docs/components/dropdown-menu","docs/2.components/dropdown-menu","A menu to display actions when clicking on an element.",{"title":434,"path":435,"stem":436,"framework":16,"category":437,"description":438,"badge":439},"Editor","/docs/components/editor","docs/2.components/editor","editor","A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.","Soon",{"title":441,"path":442,"stem":443,"framework":16,"category":437,"description":444,"badge":439},"EditorDragHandle","/docs/components/editor-drag-handle","docs/2.components/editor-drag-handle","A draggable handle for reordering and selecting blocks in the editor.",{"title":446,"path":447,"stem":448,"framework":16,"category":437,"description":449,"badge":439},"EditorEmojiMenu","/docs/components/editor-emoji-menu","docs/2.components/editor-emoji-menu","An emoji picker menu that displays emoji suggestions when typing the : character in the editor.",{"title":451,"path":452,"stem":453,"framework":16,"category":437,"description":454,"badge":439},"EditorMentionMenu","/docs/components/editor-mention-menu","docs/2.components/editor-mention-menu","A mention menu that displays user suggestions when typing the @ character in the editor.",{"title":456,"path":457,"stem":458,"framework":16,"category":437,"description":459,"badge":439},"EditorSuggestionMenu","/docs/components/editor-suggestion-menu","docs/2.components/editor-suggestion-menu","A command menu that displays formatting and action suggestions when typing the / character in the editor.",{"title":461,"path":462,"stem":463,"framework":16,"category":437,"description":464,"badge":439},"EditorToolbar","/docs/components/editor-toolbar","docs/2.components/editor-toolbar","A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.",{"title":466,"path":467,"stem":468,"framework":16,"category":166,"description":469},"Empty","/docs/components/empty","docs/2.components/empty","A component to display an empty state.",{"title":471,"path":472,"stem":473,"framework":16,"category":178,"description":474},"Error","/docs/components/error","docs/2.components/error","A pre-built error component with NuxtError support.",{"title":476,"path":477,"stem":478,"framework":16,"category":172,"description":479},"FieldGroup","/docs/components/field-group","docs/2.components/field-group","Group multiple button-like elements together.",{"title":481,"path":482,"stem":483,"framework":16,"category":282,"description":484},"FileUpload","/docs/components/file-upload","docs/2.components/file-upload","An input element to upload files.",{"title":486,"path":487,"stem":488,"framework":16,"category":178,"description":489},"Footer","/docs/components/footer","docs/2.components/footer","A responsive footer component.",{"title":491,"path":492,"stem":493,"framework":16,"category":220,"description":494},"FooterColumns","/docs/components/footer-columns","docs/2.components/footer-columns","A list of links as columns to display in your Footer.",{"title":496,"path":497,"stem":498,"framework":16,"category":282,"description":499},"Form","/docs/components/form","docs/2.components/form","A form component with built-in validation and submission handling.",{"title":501,"path":502,"stem":503,"framework":16,"category":282,"description":504},"FormField","/docs/components/form-field","docs/2.components/form-field","A wrapper for form elements that provides validation and error handling.",{"title":506,"path":507,"stem":508,"framework":16,"category":178,"description":509},"Header","/docs/components/header","docs/2.components/header","A responsive header component.",{"title":511,"path":512,"stem":513,"framework":16,"category":172,"description":514},"Icon","/docs/components/icon","docs/2.components/icon","A component to display any icon from Iconify or another component.",{"title":516,"path":517,"stem":518,"framework":16,"category":282,"description":519},"Input","/docs/components/input","docs/2.components/input","An input element to enter text.",{"title":521,"path":522,"stem":523,"framework":16,"category":282,"description":524,"badge":525},"InputDate","/docs/components/input-date","docs/2.components/input-date","An input component for date selection.","New",{"title":527,"path":528,"stem":529,"framework":16,"category":282,"description":530},"InputMenu","/docs/components/input-menu","docs/2.components/input-menu","An autocomplete input with real-time suggestions.",{"title":532,"path":533,"stem":534,"framework":16,"category":282,"description":535},"InputNumber","/docs/components/input-number","docs/2.components/input-number","An input for numerical values with a customizable range.",{"title":537,"path":538,"stem":539,"framework":16,"category":282,"description":540},"InputTags","/docs/components/input-tags","docs/2.components/input-tags","An input element that displays interactive tags.",{"title":542,"path":543,"stem":544,"framework":16,"category":282,"description":545,"badge":525},"InputTime","/docs/components/input-time","docs/2.components/input-time","An input for selecting a time.",{"title":547,"path":548,"stem":549,"framework":16,"category":172,"description":550},"Kbd","/docs/components/kbd","docs/2.components/kbd","A kbd element to display a keyboard key.",{"title":552,"path":553,"stem":554,"framework":16,"category":220,"description":555},"Link","/docs/components/link","docs/2.components/link","A wrapper around \u003CNuxtLink> with extra props.",{"title":557,"path":558,"stem":559,"framework":16,"category":560,"description":561},"LocaleSelect","/docs/components/locale-select","docs/2.components/locale-select","i18n","A Select to switch between locales.",{"title":563,"path":564,"stem":565,"framework":16,"category":178,"description":566},"Main","/docs/components/main","docs/2.components/main","A main element that fills the available viewport height.",{"title":568,"path":569,"stem":570,"framework":16,"category":166,"description":571},"Marquee","/docs/components/marquee","docs/2.components/marquee","A component to create infinite scrolling content.",{"title":573,"path":574,"stem":575,"framework":16,"category":370,"description":576},"Modal","/docs/components/modal","docs/2.components/modal","A dialog window that can be used to display a message or request user input.",{"title":578,"path":579,"stem":580,"framework":16,"category":220,"description":581},"NavigationMenu","/docs/components/navigation-menu","docs/2.components/navigation-menu","A list of links that can be displayed horizontally or vertically.",{"title":583,"path":584,"stem":585,"framework":16,"category":184,"description":586},"Page","/docs/components/page","docs/2.components/page","A grid layout for your pages with left and right columns.",{"title":588,"path":589,"stem":590,"framework":16,"category":184,"description":591},"PageAnchors","/docs/components/page-anchors","docs/2.components/page-anchors","A list of anchors to be displayed in the page.",{"title":593,"path":594,"stem":595,"framework":16,"category":184,"description":596},"PageAside","/docs/components/page-aside","docs/2.components/page-aside","A sticky aside to display your page navigation.",{"title":598,"path":599,"stem":600,"framework":16,"category":184,"description":601},"PageBody","/docs/components/page-body","docs/2.components/page-body","The main content of your page.",{"title":603,"path":604,"stem":605,"framework":16,"category":184,"description":606},"PageCard","/docs/components/page-card","docs/2.components/page-card","A pre-styled card component that displays a title, description and optional link.",{"title":608,"path":609,"stem":610,"framework":16,"category":184,"description":611},"PageColumns","/docs/components/page-columns","docs/2.components/page-columns","A responsive multi-column layout system for organizing content side-by-side.",{"title":613,"path":614,"stem":615,"framework":16,"category":184,"description":616},"PageCTA","/docs/components/page-cta","docs/2.components/page-cta","A call to action section to display in your pages.",{"title":618,"path":619,"stem":620,"framework":16,"category":184,"description":621},"PageFeature","/docs/components/page-feature","docs/2.components/page-feature","A component to showcase key features of your application.",{"title":623,"path":624,"stem":625,"framework":16,"category":184,"description":626},"PageGrid","/docs/components/page-grid","docs/2.components/page-grid","A responsive grid system for displaying content in a flexible layout.",{"title":628,"path":629,"stem":630,"framework":16,"category":184,"description":631},"PageHeader","/docs/components/page-header","docs/2.components/page-header","A responsive header for your pages.",{"title":633,"path":634,"stem":635,"framework":16,"category":184,"description":636},"PageHero","/docs/components/page-hero","docs/2.components/page-hero","A responsive hero for your pages.",{"title":638,"path":639,"stem":640,"framework":16,"category":184,"description":641},"PageLinks","/docs/components/page-links","docs/2.components/page-links","A list of links to be displayed in the page.",{"title":643,"path":644,"stem":645,"framework":16,"category":184,"description":646},"PageList","/docs/components/page-list","docs/2.components/page-list","A vertical list layout for displaying content in a stacked format.",{"title":648,"path":649,"stem":650,"framework":16,"category":184,"description":651},"PageLogos","/docs/components/page-logos","docs/2.components/page-logos","A list of logos or images to display on your pages.",{"title":653,"path":654,"stem":655,"framework":16,"category":184,"description":656},"PageSection","/docs/components/page-section","docs/2.components/page-section","A responsive section for your pages.",{"title":658,"path":659,"stem":660,"framework":16,"category":220,"description":661},"Pagination","/docs/components/pagination","docs/2.components/pagination","A list of buttons or links to navigate through pages.",{"title":663,"path":664,"stem":665,"framework":16,"category":282,"description":666},"PinInput","/docs/components/pin-input","docs/2.components/pin-input","An input element to enter a pin.",{"title":668,"path":669,"stem":670,"framework":16,"category":370,"description":671},"Popover","/docs/components/popover","docs/2.components/popover","A non-modal dialog that floats around a trigger element.",{"title":673,"path":674,"stem":675,"framework":16,"category":184,"description":676},"PricingPlan","/docs/components/pricing-plan","docs/2.components/pricing-plan","A customizable pricing plan to display in a pricing page.",{"title":678,"path":679,"stem":680,"framework":16,"category":184,"description":681},"PricingPlans","/docs/components/pricing-plans","docs/2.components/pricing-plans","Display a list of pricing plans in a responsive grid layout.",{"title":683,"path":684,"stem":685,"framework":16,"category":184,"description":686},"PricingTable","/docs/components/pricing-table","docs/2.components/pricing-table","A responsive pricing table component that displays tiered pricing plans with feature comparisons.",{"title":688,"path":689,"stem":690,"framework":16,"category":172,"description":691},"Progress","/docs/components/progress","docs/2.components/progress","An indicator showing the progress of a task.",{"title":693,"path":694,"stem":695,"framework":16,"category":282,"description":696},"RadioGroup","/docs/components/radio-group","docs/2.components/radio-group","A set of radio buttons to select a single option from a list.",{"title":698,"path":699,"stem":700,"framework":16,"category":282,"description":701},"Select","/docs/components/select","docs/2.components/select","A select element to choose from a list of options.",{"title":703,"path":704,"stem":705,"framework":16,"category":282,"description":706},"SelectMenu","/docs/components/select-menu","docs/2.components/select-menu","An advanced searchable select element.",{"title":708,"path":709,"stem":710,"framework":16,"category":172,"description":711},"Separator","/docs/components/separator","docs/2.components/separator","Separates content horizontally or vertically.",{"title":713,"path":714,"stem":715,"framework":16,"category":172,"description":716},"Skeleton","/docs/components/skeleton","docs/2.components/skeleton","A placeholder to show while content is loading.",{"title":718,"path":719,"stem":720,"framework":16,"category":370,"description":721},"Slideover","/docs/components/slideover","docs/2.components/slideover","A dialog that slides in from any side of the screen.",{"title":723,"path":724,"stem":725,"framework":16,"category":282,"description":726},"Slider","/docs/components/slider","docs/2.components/slider","An input to select a numeric value within a range.",{"title":728,"path":729,"stem":730,"framework":16,"category":220,"description":731},"Stepper","/docs/components/stepper","docs/2.components/stepper","A set of steps that are used to indicate progress through a multi-step process.",{"title":733,"path":734,"stem":735,"framework":16,"category":282,"description":736},"Switch","/docs/components/switch","docs/2.components/switch","A control that toggles between two states.",{"title":738,"path":739,"stem":740,"framework":16,"category":166,"description":741},"Table","/docs/components/table","docs/2.components/table","A responsive table element to display data in rows and columns.",{"title":743,"path":744,"stem":745,"framework":16,"category":220,"description":746},"Tabs","/docs/components/tabs","docs/2.components/tabs","A set of tab panels that are displayed one at a time.",{"title":748,"path":749,"stem":750,"framework":16,"category":282,"description":751},"Textarea","/docs/components/textarea","docs/2.components/textarea","A textarea element to input multi-line text.",{"title":753,"path":754,"stem":755,"framework":16,"category":166,"description":756},"Timeline","/docs/components/timeline","docs/2.components/timeline","A component that displays a sequence of events with dates, titles, icons or avatars.",{"title":758,"path":759,"stem":760,"framework":16,"category":370,"description":761},"Toast","/docs/components/toast","docs/2.components/toast","A succinct message to provide information or feedback to the user.",{"title":763,"path":764,"stem":765,"framework":16,"category":370,"description":766},"Tooltip","/docs/components/tooltip","docs/2.components/tooltip","A popup that reveals information when hovering over an element.",{"title":768,"path":769,"stem":770,"framework":16,"category":166,"description":771},"Tree","/docs/components/tree","docs/2.components/tree","A tree view component to display and interact with hierarchical data structures.",{"title":773,"path":774,"stem":775,"framework":16,"category":166,"description":776},"User","/docs/components/user","docs/2.components/user","Display user information with name, description and avatar.",{"title":778,"framework":16,"category":16,"description":16,"icon":779,"path":780,"stem":781,"children":782,"page":36},"Composables","i-lucide-square-function","/docs/composables","docs/3.composables",[783,788,793],{"title":784,"path":785,"stem":786,"framework":16,"category":16,"description":787},"defineShortcuts","/docs/composables/define-shortcuts","docs/3.composables/define-shortcuts","A composable to define keyboard shortcuts in your app.",{"title":789,"path":790,"stem":791,"framework":16,"category":16,"description":792},"useOverlay","/docs/composables/use-overlay","docs/3.composables/use-overlay","A composable to programmatically control overlays.",{"title":794,"path":795,"stem":796,"framework":16,"category":16,"description":797},"useToast","/docs/composables/use-toast","docs/3.composables/use-toast","A composable to display toast notifications in your app.",{"title":799,"path":800,"stem":801,"children":802,"framework":28,"category":16,"description":16,"icon":898},"Typography","/docs/typography","docs/4.typography/1.index",[803,805,810,815,820,825,830,834,839,843,848,853,858,863,868,872,877,881,885,889,894],{"title":15,"path":800,"stem":801,"framework":28,"category":16,"description":804},"Beautiful typography components and utilities to style your content with Nuxt UI.",{"title":806,"path":807,"stem":808,"framework":28,"category":16,"description":809},"Headers and text","/docs/typography/headers-and-text","docs/4.typography/2.headers-and-text","Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.",{"title":811,"path":812,"stem":813,"framework":28,"category":16,"description":814},"Lists and tables","/docs/typography/lists-and-tables","docs/4.typography/3.lists-and-tables","Organize information with styled lists and responsive tables for clear, consistent readability.",{"title":816,"path":817,"stem":818,"framework":28,"category":16,"description":819},"Images and embeds","/docs/typography/images-and-embeds","docs/4.typography/4.images-and-embeds","Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.",{"title":821,"path":822,"stem":823,"framework":28,"category":16,"description":824},"Code","/docs/typography/code","docs/4.typography/5.code","Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.",{"title":163,"path":826,"stem":827,"framework":28,"category":828,"description":829},"/docs/typography/accordion","docs/4.typography/accordion","components","Create expandable content sections for better information organization.",{"title":197,"path":831,"stem":832,"framework":28,"category":828,"description":833},"/docs/typography/badge","docs/4.typography/badge","Display version numbers, status labels, and tags within your content.",{"title":835,"path":836,"stem":837,"framework":28,"category":828,"description":838},"Callout","/docs/typography/callout","docs/4.typography/callout","Highlight important information with eye-catching colored boxes and icons.",{"title":233,"path":840,"stem":841,"framework":28,"category":828,"description":842},"/docs/typography/card","docs/4.typography/card","Create highlighted content blocks with optional links and navigation.",{"title":844,"path":845,"stem":846,"framework":28,"category":828,"description":847},"CardGroup","/docs/typography/card-group","docs/4.typography/card-group","Organize multiple cards in responsive grid layouts for better content presentation.",{"title":849,"path":850,"stem":851,"framework":28,"category":828,"description":852},"CodeCollapse","/docs/typography/code-collapse","docs/4.typography/code-collapse","Make long code blocks collapsible to save space and improve readability.",{"title":854,"path":855,"stem":856,"framework":28,"category":828,"description":857},"CodeGroup","/docs/typography/code-group","docs/4.typography/code-group","Group multiple code examples in tabbed interfaces for easy comparison.",{"title":859,"path":860,"stem":861,"framework":28,"category":828,"description":862},"CodePreview","/docs/typography/code-preview","docs/4.typography/code-preview","Display code examples with a preview and their source for clearer documentation.",{"title":864,"path":865,"stem":866,"framework":28,"category":828,"description":867},"CodeTree","/docs/typography/code-tree","docs/4.typography/code-tree","Visualize file and folder structures with syntax-highlighted code.",{"title":295,"path":869,"stem":870,"framework":28,"category":828,"description":871},"/docs/typography/collapsible","docs/4.typography/collapsible","Toggle content visibility with smooth expand and collapse animations.",{"title":873,"path":874,"stem":875,"framework":28,"category":828,"description":876},"Field","/docs/typography/field","docs/4.typography/field","Document API parameters, props, and configuration options clearly.",{"title":476,"path":878,"stem":879,"framework":28,"category":828,"description":880},"/docs/typography/field-group","docs/4.typography/field-group","Group related fields together for comprehensive API documentation.",{"title":511,"path":882,"stem":883,"framework":28,"category":828,"description":884},"/docs/typography/icon","docs/4.typography/icon","Display icons from popular icon libraries to enhance your content.",{"title":547,"path":886,"stem":887,"framework":28,"category":828,"description":888},"/docs/typography/kbd","docs/4.typography/kbd","Display keyboard shortcuts and key combinations with proper styling.",{"title":890,"path":891,"stem":892,"framework":28,"category":828,"description":893},"Steps","/docs/typography/steps","docs/4.typography/steps","Transform headings into numbered step-by-step guides and tutorials.",{"title":743,"path":895,"stem":896,"framework":28,"category":828,"description":897},"/docs/typography/tabs","docs/4.typography/tabs","Organize related content in interactive tabbed interfaces.","i-lucide-square-pilcrow",{"id":900,"title":65,"body":901,"category":16,"description":68,"extension":3073,"framework":16,"links":16,"meta":3716,"navigation":3717,"path":66,"seo":3718,"stem":67,"__hash__":3719},"docs/docs/1.getting-started/5.theme/2.css-variables.md",{"type":902,"value":903,"toc":3706},"minimark",[904,909,928,1171,1174,1411,1522,1629,1633,1642,1855,1857,2066,2158,2162,2171,2351,2353,2529,2625,2629,2638,2788,2790,2938,3033,3037,3057,3298,3305,3335,3398,3409,3412,3422,3456,3544,3547,3555,3590,3657,3661,3675,3702],[905,906,908],"h2",{"id":907},"colors","Colors",[910,911,912,913,918,919,923,924,927],"p",{},"Nuxt UI provides Tailwind CSS utility classes for each ",[914,915,917],"a",{"href":916},"/docs/getting-started/theme/design-system#semantic-colors","semantic color"," you define, allowing you to use class names like ",[920,921,922],"code",{},"text-error"," or ",[920,925,926],{},"bg-success",":",[929,930,931,966],"code-preview",{},[910,932,933,943,948,953,958,963],{},[934,935,942],"span",{"className":936},[937,938,939,940,941],"text-primary","text-sm","px-4","py-1.5","inline-block","Primary",[934,944,947],{"className":945},[946,938,939,940,941],"text-secondary","Secondary",[934,949,952],{"className":950},[951,938,939,940,941],"text-success","Success",[934,954,957],{"className":955},[956,938,939,940,941],"text-info","Info",[934,959,962],{"className":960},[961,938,939,940,941],"text-warning","Warning",[934,964,471],{"className":965},[922,938,939,940,941],[967,968,970],"template",{"v-slot:code":969},"",[971,972,975],"pre",{"className":973,"code":974,"language":34,"meta":969,"style":969},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cspan class=\"text-primary\">Primary\u003C/span>\n  \u003Cspan class=\"text-secondary\">Secondary\u003C/span>\n  \u003Cspan class=\"text-success\">Success\u003C/span>\n  \u003Cspan class=\"text-info\">Info\u003C/span>\n  \u003Cspan class=\"text-warning\">Warning\u003C/span>\n  \u003Cspan class=\"text-error\">Error\u003C/span>\n\u003C/template>\n",[920,976,977,991,1027,1054,1081,1108,1135,1162],{"__ignoreMap":969},[934,978,981,985,988],{"class":979,"line":980},"line",1,[934,982,984],{"class":983},"sMK4o","\u003C",[934,986,967],{"class":987},"swJcz",[934,989,990],{"class":983},">\n",[934,992,994,997,999,1003,1006,1009,1012,1014,1017,1020,1023,1025],{"class":979,"line":993},2,[934,995,996],{"class":983},"  \u003C",[934,998,934],{"class":987},[934,1000,1002],{"class":1001},"spNyl"," class",[934,1004,1005],{"class":983},"=",[934,1007,1008],{"class":983},"\"",[934,1010,937],{"class":1011},"sfazB",[934,1013,1008],{"class":983},[934,1015,1016],{"class":983},">",[934,1018,942],{"class":1019},"sTEyZ",[934,1021,1022],{"class":983},"\u003C/",[934,1024,934],{"class":987},[934,1026,990],{"class":983},[934,1028,1030,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052],{"class":979,"line":1029},3,[934,1031,996],{"class":983},[934,1033,934],{"class":987},[934,1035,1002],{"class":1001},[934,1037,1005],{"class":983},[934,1039,1008],{"class":983},[934,1041,946],{"class":1011},[934,1043,1008],{"class":983},[934,1045,1016],{"class":983},[934,1047,947],{"class":1019},[934,1049,1022],{"class":983},[934,1051,934],{"class":987},[934,1053,990],{"class":983},[934,1055,1057,1059,1061,1063,1065,1067,1069,1071,1073,1075,1077,1079],{"class":979,"line":1056},4,[934,1058,996],{"class":983},[934,1060,934],{"class":987},[934,1062,1002],{"class":1001},[934,1064,1005],{"class":983},[934,1066,1008],{"class":983},[934,1068,951],{"class":1011},[934,1070,1008],{"class":983},[934,1072,1016],{"class":983},[934,1074,952],{"class":1019},[934,1076,1022],{"class":983},[934,1078,934],{"class":987},[934,1080,990],{"class":983},[934,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106],{"class":979,"line":1083},5,[934,1085,996],{"class":983},[934,1087,934],{"class":987},[934,1089,1002],{"class":1001},[934,1091,1005],{"class":983},[934,1093,1008],{"class":983},[934,1095,956],{"class":1011},[934,1097,1008],{"class":983},[934,1099,1016],{"class":983},[934,1101,957],{"class":1019},[934,1103,1022],{"class":983},[934,1105,934],{"class":987},[934,1107,990],{"class":983},[934,1109,1111,1113,1115,1117,1119,1121,1123,1125,1127,1129,1131,1133],{"class":979,"line":1110},6,[934,1112,996],{"class":983},[934,1114,934],{"class":987},[934,1116,1002],{"class":1001},[934,1118,1005],{"class":983},[934,1120,1008],{"class":983},[934,1122,961],{"class":1011},[934,1124,1008],{"class":983},[934,1126,1016],{"class":983},[934,1128,962],{"class":1019},[934,1130,1022],{"class":983},[934,1132,934],{"class":987},[934,1134,990],{"class":983},[934,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160],{"class":979,"line":1137},7,[934,1139,996],{"class":983},[934,1141,934],{"class":987},[934,1143,1002],{"class":1001},[934,1145,1005],{"class":983},[934,1147,1008],{"class":983},[934,1149,922],{"class":1011},[934,1151,1008],{"class":983},[934,1153,1016],{"class":983},[934,1155,471],{"class":1019},[934,1157,1022],{"class":983},[934,1159,934],{"class":987},[934,1161,990],{"class":983},[934,1163,1165,1167,1169],{"class":979,"line":1164},8,[934,1166,1022],{"class":983},[934,1168,967],{"class":987},[934,1170,990],{"class":983},[910,1172,1173],{},"Each utility class uses a CSS variable to set its color for light and dark modes:",[1175,1176,1177,1300],"code-group",{},[971,1178,1183],{"className":1179,"code":1180,"filename":1181,"language":1182,"meta":969,"style":969},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  --ui-primary: var(--ui-color-primary-500);\n  --ui-secondary: var(--ui-color-secondary-500);\n  --ui-success: var(--ui-color-success-500);\n  --ui-info: var(--ui-color-info-500);\n  --ui-warning: var(--ui-color-warning-500);\n  --ui-error: var(--ui-color-error-500);\n}\n","Light","css",[920,1184,1185,1195,1215,1231,1247,1263,1279,1295],{"__ignoreMap":969},[934,1186,1187,1189,1192],{"class":979,"line":980},[934,1188,927],{"class":983},[934,1190,1191],{"class":1001},"root",[934,1193,1194],{"class":983}," {\n",[934,1196,1197,1200,1202,1206,1209,1212],{"class":979,"line":993},[934,1198,1199],{"class":1019},"  --ui-primary",[934,1201,927],{"class":983},[934,1203,1205],{"class":1204},"s2Zo4"," var",[934,1207,1208],{"class":983},"(",[934,1210,1211],{"class":1019},"--ui-color-primary-500",[934,1213,1214],{"class":983},");\n",[934,1216,1217,1220,1222,1224,1226,1229],{"class":979,"line":1029},[934,1218,1219],{"class":1019},"  --ui-secondary",[934,1221,927],{"class":983},[934,1223,1205],{"class":1204},[934,1225,1208],{"class":983},[934,1227,1228],{"class":1019},"--ui-color-secondary-500",[934,1230,1214],{"class":983},[934,1232,1233,1236,1238,1240,1242,1245],{"class":979,"line":1056},[934,1234,1235],{"class":1019},"  --ui-success",[934,1237,927],{"class":983},[934,1239,1205],{"class":1204},[934,1241,1208],{"class":983},[934,1243,1244],{"class":1019},"--ui-color-success-500",[934,1246,1214],{"class":983},[934,1248,1249,1252,1254,1256,1258,1261],{"class":979,"line":1083},[934,1250,1251],{"class":1019},"  --ui-info",[934,1253,927],{"class":983},[934,1255,1205],{"class":1204},[934,1257,1208],{"class":983},[934,1259,1260],{"class":1019},"--ui-color-info-500",[934,1262,1214],{"class":983},[934,1264,1265,1268,1270,1272,1274,1277],{"class":979,"line":1110},[934,1266,1267],{"class":1019},"  --ui-warning",[934,1269,927],{"class":983},[934,1271,1205],{"class":1204},[934,1273,1208],{"class":983},[934,1275,1276],{"class":1019},"--ui-color-warning-500",[934,1278,1214],{"class":983},[934,1280,1281,1284,1286,1288,1290,1293],{"class":979,"line":1137},[934,1282,1283],{"class":1019},"  --ui-error",[934,1285,927],{"class":983},[934,1287,1205],{"class":1204},[934,1289,1208],{"class":983},[934,1291,1292],{"class":1019},"--ui-color-error-500",[934,1294,1214],{"class":983},[934,1296,1297],{"class":979,"line":1164},[934,1298,1299],{"class":983},"}\n",[971,1301,1304],{"className":1179,"code":1302,"filename":1303,"language":1182,"meta":969,"style":969},".dark {\n  --ui-primary: var(--ui-color-primary-400);\n  --ui-secondary: var(--ui-color-secondary-400);\n  --ui-success: var(--ui-color-success-400);\n  --ui-info: var(--ui-color-info-400);\n  --ui-warning: var(--ui-color-warning-400);\n  --ui-error: var(--ui-color-error-400);\n}\n","Dark",[920,1305,1306,1317,1332,1347,1362,1377,1392,1407],{"__ignoreMap":969},[934,1307,1308,1311,1315],{"class":979,"line":980},[934,1309,1310],{"class":983},".",[934,1312,1314],{"class":1313},"sBMFI","dark",[934,1316,1194],{"class":983},[934,1318,1319,1321,1323,1325,1327,1330],{"class":979,"line":993},[934,1320,1199],{"class":1019},[934,1322,927],{"class":983},[934,1324,1205],{"class":1204},[934,1326,1208],{"class":983},[934,1328,1329],{"class":1019},"--ui-color-primary-400",[934,1331,1214],{"class":983},[934,1333,1334,1336,1338,1340,1342,1345],{"class":979,"line":1029},[934,1335,1219],{"class":1019},[934,1337,927],{"class":983},[934,1339,1205],{"class":1204},[934,1341,1208],{"class":983},[934,1343,1344],{"class":1019},"--ui-color-secondary-400",[934,1346,1214],{"class":983},[934,1348,1349,1351,1353,1355,1357,1360],{"class":979,"line":1056},[934,1350,1235],{"class":1019},[934,1352,927],{"class":983},[934,1354,1205],{"class":1204},[934,1356,1208],{"class":983},[934,1358,1359],{"class":1019},"--ui-color-success-400",[934,1361,1214],{"class":983},[934,1363,1364,1366,1368,1370,1372,1375],{"class":979,"line":1083},[934,1365,1251],{"class":1019},[934,1367,927],{"class":983},[934,1369,1205],{"class":1204},[934,1371,1208],{"class":983},[934,1373,1374],{"class":1019},"--ui-color-info-400",[934,1376,1214],{"class":983},[934,1378,1379,1381,1383,1385,1387,1390],{"class":979,"line":1110},[934,1380,1267],{"class":1019},[934,1382,927],{"class":983},[934,1384,1205],{"class":1204},[934,1386,1208],{"class":983},[934,1388,1389],{"class":1019},"--ui-color-warning-400",[934,1391,1214],{"class":983},[934,1393,1394,1396,1398,1400,1402,1405],{"class":979,"line":1137},[934,1395,1283],{"class":1019},[934,1397,927],{"class":983},[934,1399,1205],{"class":1204},[934,1401,1208],{"class":983},[934,1403,1404],{"class":1019},"--ui-color-error-400",[934,1406,1214],{"class":983},[934,1408,1409],{"class":979,"line":1164},[934,1410,1299],{"class":983},[1412,1413,1414,1421],"tip",{},[910,1415,1416,1417,1420],{},"You can adjust which shade each utility class uses for light and dark mode in your ",[920,1418,1419],{},"main.css"," file:",[971,1422,1425],{"className":1179,"code":1423,"filename":1424,"language":1182,"meta":969,"style":969},"@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n:root {\n  --ui-primary: var(--ui-color-primary-700);\n}\n\n.dark {\n  --ui-primary: var(--ui-color-primary-200);\n}\n","app/assets/css/main.css",[920,1426,1427,1444,1457,1462,1470,1485,1489,1493,1501,1517],{"__ignoreMap":969},[934,1428,1429,1433,1436,1439,1441],{"class":979,"line":980},[934,1430,1432],{"class":1431},"s7zQu","@import",[934,1434,1435],{"class":983}," \"",[934,1437,1438],{"class":1011},"tailwindcss",[934,1440,1008],{"class":983},[934,1442,1443],{"class":983},";\n",[934,1445,1446,1448,1450,1453,1455],{"class":979,"line":993},[934,1447,1432],{"class":1431},[934,1449,1435],{"class":983},[934,1451,1452],{"class":1011},"@nuxt/ui",[934,1454,1008],{"class":983},[934,1456,1443],{"class":983},[934,1458,1459],{"class":979,"line":1029},[934,1460,1461],{"emptyLinePlaceholder":21},"\n",[934,1463,1464,1466,1468],{"class":979,"line":1056},[934,1465,927],{"class":983},[934,1467,1191],{"class":1001},[934,1469,1194],{"class":983},[934,1471,1472,1474,1476,1478,1480,1483],{"class":979,"line":1083},[934,1473,1199],{"class":1019},[934,1475,927],{"class":983},[934,1477,1205],{"class":1204},[934,1479,1208],{"class":983},[934,1481,1482],{"class":1019},"--ui-color-primary-700",[934,1484,1214],{"class":983},[934,1486,1487],{"class":979,"line":1110},[934,1488,1299],{"class":983},[934,1490,1491],{"class":979,"line":1137},[934,1492,1461],{"emptyLinePlaceholder":21},[934,1494,1495,1497,1499],{"class":979,"line":1164},[934,1496,1310],{"class":983},[934,1498,1314],{"class":1313},[934,1500,1194],{"class":983},[934,1502,1504,1506,1508,1510,1512,1515],{"class":979,"line":1503},9,[934,1505,1199],{"class":1019},[934,1507,927],{"class":983},[934,1509,1205],{"class":1204},[934,1511,1208],{"class":983},[934,1513,1514],{"class":1019},"--ui-color-primary-200",[934,1516,1214],{"class":983},[934,1518,1520],{"class":979,"line":1519},10,[934,1521,1299],{"class":983},[1523,1524,1525,1546],"warning",{},[910,1526,1527,1528,1531,1532,1539,1540,1543,1544,1420],{},"You can't use ",[920,1529,1530],{},"primary: 'black'"," in your ",[914,1533,1535],{"href":1534},"/docs/getting-started/theme/design-system#runtime-configuration",[1536,1537,1538],"strong",{},"config"," because ",[920,1541,1542],{},"black"," doesn't have multiple shades. To use solid black or white as your primary color, set it directly in your ",[920,1545,1419],{},[971,1547,1549],{"className":1179,"code":1548,"filename":1424,"language":1182,"meta":969,"style":969},"@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n:root {\n  --ui-primary: black;\n}\n\n.dark {\n  --ui-primary: white;\n}\n",[920,1550,1551,1563,1575,1579,1587,1598,1602,1606,1614,1625],{"__ignoreMap":969},[934,1552,1553,1555,1557,1559,1561],{"class":979,"line":980},[934,1554,1432],{"class":1431},[934,1556,1435],{"class":983},[934,1558,1438],{"class":1011},[934,1560,1008],{"class":983},[934,1562,1443],{"class":983},[934,1564,1565,1567,1569,1571,1573],{"class":979,"line":993},[934,1566,1432],{"class":1431},[934,1568,1435],{"class":983},[934,1570,1452],{"class":1011},[934,1572,1008],{"class":983},[934,1574,1443],{"class":983},[934,1576,1577],{"class":979,"line":1029},[934,1578,1461],{"emptyLinePlaceholder":21},[934,1580,1581,1583,1585],{"class":979,"line":1056},[934,1582,927],{"class":983},[934,1584,1191],{"class":1001},[934,1586,1194],{"class":983},[934,1588,1589,1591,1593,1596],{"class":979,"line":1083},[934,1590,1199],{"class":1019},[934,1592,927],{"class":983},[934,1594,1595],{"class":1019}," black",[934,1597,1443],{"class":983},[934,1599,1600],{"class":979,"line":1110},[934,1601,1299],{"class":983},[934,1603,1604],{"class":979,"line":1137},[934,1605,1461],{"emptyLinePlaceholder":21},[934,1607,1608,1610,1612],{"class":979,"line":1164},[934,1609,1310],{"class":983},[934,1611,1314],{"class":1313},[934,1613,1194],{"class":983},[934,1615,1616,1618,1620,1623],{"class":979,"line":1503},[934,1617,1199],{"class":1019},[934,1619,927],{"class":983},[934,1621,1622],{"class":1019}," white",[934,1624,1443],{"class":983},[934,1626,1627],{"class":979,"line":1519},[934,1628,1299],{"class":983},[905,1630,1632],{"id":1631},"text","Text",[910,1634,1635,1636,923,1639,927],{},"Nuxt UI provides Tailwind CSS utility classes for text colors, allowing you to use class names like ",[920,1637,1638],{},"text-dimmed",[920,1640,1641],{},"text-muted",[929,1643,1644,1675],{},[910,1645,1646,1651,1655,1660,1664,1669],{},[934,1647,1650],{"className":1648},[1638,938,939,940,941,1649],"rounded-md","Dimmed",[934,1652,1654],{"className":1653},[1641,938,939,940,941,1649],"Muted",[934,1656,1659],{"className":1657},[1658,938,939,940,941,1649],"text-toned","Toned",[934,1661,1632],{"className":1662},[1663,938,939,940,941,1649],"text-default",[934,1665,1668],{"className":1666},[1667,938,939,940,941,1649],"text-highlighted","Highlighted",[934,1670,1674],{"className":1671},[1672,1673,938,939,940,941,1649],"text-inverted","bg-inverted","Inverted",[967,1676,1677],{"v-slot:code":969},[971,1678,1680],{"className":973,"code":1679,"language":34,"meta":969,"style":969},"\u003Ctemplate>\n  \u003Cspan class=\"text-dimmed\">Dimmed\u003C/span>\n  \u003Cspan class=\"text-muted\">Muted\u003C/span>\n  \u003Cspan class=\"text-toned\">Toned\u003C/span>\n  \u003Cspan class=\"text-default\">Text\u003C/span>\n  \u003Cspan class=\"text-highlighted\">Highlighted\u003C/span>\n  \u003Cspan class=\"text-inverted bg-inverted\">Inverted\u003C/span>\n\u003C/template>\n",[920,1681,1682,1690,1716,1742,1768,1794,1820,1847],{"__ignoreMap":969},[934,1683,1684,1686,1688],{"class":979,"line":980},[934,1685,984],{"class":983},[934,1687,967],{"class":987},[934,1689,990],{"class":983},[934,1691,1692,1694,1696,1698,1700,1702,1704,1706,1708,1710,1712,1714],{"class":979,"line":993},[934,1693,996],{"class":983},[934,1695,934],{"class":987},[934,1697,1002],{"class":1001},[934,1699,1005],{"class":983},[934,1701,1008],{"class":983},[934,1703,1638],{"class":1011},[934,1705,1008],{"class":983},[934,1707,1016],{"class":983},[934,1709,1650],{"class":1019},[934,1711,1022],{"class":983},[934,1713,934],{"class":987},[934,1715,990],{"class":983},[934,1717,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740],{"class":979,"line":1029},[934,1719,996],{"class":983},[934,1721,934],{"class":987},[934,1723,1002],{"class":1001},[934,1725,1005],{"class":983},[934,1727,1008],{"class":983},[934,1729,1641],{"class":1011},[934,1731,1008],{"class":983},[934,1733,1016],{"class":983},[934,1735,1654],{"class":1019},[934,1737,1022],{"class":983},[934,1739,934],{"class":987},[934,1741,990],{"class":983},[934,1743,1744,1746,1748,1750,1752,1754,1756,1758,1760,1762,1764,1766],{"class":979,"line":1056},[934,1745,996],{"class":983},[934,1747,934],{"class":987},[934,1749,1002],{"class":1001},[934,1751,1005],{"class":983},[934,1753,1008],{"class":983},[934,1755,1658],{"class":1011},[934,1757,1008],{"class":983},[934,1759,1016],{"class":983},[934,1761,1659],{"class":1019},[934,1763,1022],{"class":983},[934,1765,934],{"class":987},[934,1767,990],{"class":983},[934,1769,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792],{"class":979,"line":1083},[934,1771,996],{"class":983},[934,1773,934],{"class":987},[934,1775,1002],{"class":1001},[934,1777,1005],{"class":983},[934,1779,1008],{"class":983},[934,1781,1663],{"class":1011},[934,1783,1008],{"class":983},[934,1785,1016],{"class":983},[934,1787,1632],{"class":1019},[934,1789,1022],{"class":983},[934,1791,934],{"class":987},[934,1793,990],{"class":983},[934,1795,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816,1818],{"class":979,"line":1110},[934,1797,996],{"class":983},[934,1799,934],{"class":987},[934,1801,1002],{"class":1001},[934,1803,1005],{"class":983},[934,1805,1008],{"class":983},[934,1807,1667],{"class":1011},[934,1809,1008],{"class":983},[934,1811,1016],{"class":983},[934,1813,1668],{"class":1019},[934,1815,1022],{"class":983},[934,1817,934],{"class":987},[934,1819,990],{"class":983},[934,1821,1822,1824,1826,1828,1830,1832,1835,1837,1839,1841,1843,1845],{"class":979,"line":1137},[934,1823,996],{"class":983},[934,1825,934],{"class":987},[934,1827,1002],{"class":1001},[934,1829,1005],{"class":983},[934,1831,1008],{"class":983},[934,1833,1834],{"class":1011},"text-inverted bg-inverted",[934,1836,1008],{"class":983},[934,1838,1016],{"class":983},[934,1840,1674],{"class":1019},[934,1842,1022],{"class":983},[934,1844,934],{"class":987},[934,1846,990],{"class":983},[934,1848,1849,1851,1853],{"class":979,"line":1164},[934,1850,1022],{"class":983},[934,1852,967],{"class":987},[934,1854,990],{"class":983},[910,1856,1173],{},[1175,1858,1859,1967],{},[971,1860,1862],{"className":1179,"code":1861,"filename":1181,"language":1182,"meta":969,"style":969},":root {\n  --ui-text-dimmed: var(--ui-color-neutral-400);\n  --ui-text-muted: var(--ui-color-neutral-500);\n  --ui-text-toned: var(--ui-color-neutral-600);\n  --ui-text: var(--ui-color-neutral-700);\n  --ui-text-highlighted: var(--ui-color-neutral-900);\n  --ui-text-inverted: white;\n}\n",[920,1863,1864,1872,1888,1904,1920,1936,1952,1963],{"__ignoreMap":969},[934,1865,1866,1868,1870],{"class":979,"line":980},[934,1867,927],{"class":983},[934,1869,1191],{"class":1001},[934,1871,1194],{"class":983},[934,1873,1874,1877,1879,1881,1883,1886],{"class":979,"line":993},[934,1875,1876],{"class":1019},"  --ui-text-dimmed",[934,1878,927],{"class":983},[934,1880,1205],{"class":1204},[934,1882,1208],{"class":983},[934,1884,1885],{"class":1019},"--ui-color-neutral-400",[934,1887,1214],{"class":983},[934,1889,1890,1893,1895,1897,1899,1902],{"class":979,"line":1029},[934,1891,1892],{"class":1019},"  --ui-text-muted",[934,1894,927],{"class":983},[934,1896,1205],{"class":1204},[934,1898,1208],{"class":983},[934,1900,1901],{"class":1019},"--ui-color-neutral-500",[934,1903,1214],{"class":983},[934,1905,1906,1909,1911,1913,1915,1918],{"class":979,"line":1056},[934,1907,1908],{"class":1019},"  --ui-text-toned",[934,1910,927],{"class":983},[934,1912,1205],{"class":1204},[934,1914,1208],{"class":983},[934,1916,1917],{"class":1019},"--ui-color-neutral-600",[934,1919,1214],{"class":983},[934,1921,1922,1925,1927,1929,1931,1934],{"class":979,"line":1083},[934,1923,1924],{"class":1019},"  --ui-text",[934,1926,927],{"class":983},[934,1928,1205],{"class":1204},[934,1930,1208],{"class":983},[934,1932,1933],{"class":1019},"--ui-color-neutral-700",[934,1935,1214],{"class":983},[934,1937,1938,1941,1943,1945,1947,1950],{"class":979,"line":1110},[934,1939,1940],{"class":1019},"  --ui-text-highlighted",[934,1942,927],{"class":983},[934,1944,1205],{"class":1204},[934,1946,1208],{"class":983},[934,1948,1949],{"class":1019},"--ui-color-neutral-900",[934,1951,1214],{"class":983},[934,1953,1954,1957,1959,1961],{"class":979,"line":1137},[934,1955,1956],{"class":1019},"  --ui-text-inverted",[934,1958,927],{"class":983},[934,1960,1622],{"class":1019},[934,1962,1443],{"class":983},[934,1964,1965],{"class":979,"line":1164},[934,1966,1299],{"class":983},[971,1968,1970],{"className":1179,"code":1969,"filename":1303,"language":1182,"meta":969,"style":969},".dark {\n  --ui-text-dimmed: var(--ui-color-neutral-500);\n  --ui-text-muted: var(--ui-color-neutral-400);\n  --ui-text-toned: var(--ui-color-neutral-300);\n  --ui-text: var(--ui-color-neutral-200);\n  --ui-text-highlighted: white;\n  --ui-text-inverted: var(--ui-color-neutral-900);\n}\n",[920,1971,1972,1980,1994,2008,2023,2038,2048,2062],{"__ignoreMap":969},[934,1973,1974,1976,1978],{"class":979,"line":980},[934,1975,1310],{"class":983},[934,1977,1314],{"class":1313},[934,1979,1194],{"class":983},[934,1981,1982,1984,1986,1988,1990,1992],{"class":979,"line":993},[934,1983,1876],{"class":1019},[934,1985,927],{"class":983},[934,1987,1205],{"class":1204},[934,1989,1208],{"class":983},[934,1991,1901],{"class":1019},[934,1993,1214],{"class":983},[934,1995,1996,1998,2000,2002,2004,2006],{"class":979,"line":1029},[934,1997,1892],{"class":1019},[934,1999,927],{"class":983},[934,2001,1205],{"class":1204},[934,2003,1208],{"class":983},[934,2005,1885],{"class":1019},[934,2007,1214],{"class":983},[934,2009,2010,2012,2014,2016,2018,2021],{"class":979,"line":1056},[934,2011,1908],{"class":1019},[934,2013,927],{"class":983},[934,2015,1205],{"class":1204},[934,2017,1208],{"class":983},[934,2019,2020],{"class":1019},"--ui-color-neutral-300",[934,2022,1214],{"class":983},[934,2024,2025,2027,2029,2031,2033,2036],{"class":979,"line":1083},[934,2026,1924],{"class":1019},[934,2028,927],{"class":983},[934,2030,1205],{"class":1204},[934,2032,1208],{"class":983},[934,2034,2035],{"class":1019},"--ui-color-neutral-200",[934,2037,1214],{"class":983},[934,2039,2040,2042,2044,2046],{"class":979,"line":1110},[934,2041,1940],{"class":1019},[934,2043,927],{"class":983},[934,2045,1622],{"class":1019},[934,2047,1443],{"class":983},[934,2049,2050,2052,2054,2056,2058,2060],{"class":979,"line":1137},[934,2051,1956],{"class":1019},[934,2053,927],{"class":983},[934,2055,1205],{"class":1204},[934,2057,1208],{"class":983},[934,2059,1949],{"class":1019},[934,2061,1214],{"class":983},[934,2063,2064],{"class":979,"line":1164},[934,2065,1299],{"class":983},[1412,2067,2068,2073],{},[910,2069,2070,2071,1420],{},"You can customize these CSS variables in your ",[920,2072,1419],{},[971,2074,2076],{"className":1179,"code":2075,"filename":1424,"language":1182,"meta":969,"style":969},"@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n:root {\n  --ui-text: var(--ui-color-neutral-900);\n}\n\n.dark {\n  --ui-text: white;\n}\n",[920,2077,2078,2090,2102,2106,2114,2128,2132,2136,2144,2154],{"__ignoreMap":969},[934,2079,2080,2082,2084,2086,2088],{"class":979,"line":980},[934,2081,1432],{"class":1431},[934,2083,1435],{"class":983},[934,2085,1438],{"class":1011},[934,2087,1008],{"class":983},[934,2089,1443],{"class":983},[934,2091,2092,2094,2096,2098,2100],{"class":979,"line":993},[934,2093,1432],{"class":1431},[934,2095,1435],{"class":983},[934,2097,1452],{"class":1011},[934,2099,1008],{"class":983},[934,2101,1443],{"class":983},[934,2103,2104],{"class":979,"line":1029},[934,2105,1461],{"emptyLinePlaceholder":21},[934,2107,2108,2110,2112],{"class":979,"line":1056},[934,2109,927],{"class":983},[934,2111,1191],{"class":1001},[934,2113,1194],{"class":983},[934,2115,2116,2118,2120,2122,2124,2126],{"class":979,"line":1083},[934,2117,1924],{"class":1019},[934,2119,927],{"class":983},[934,2121,1205],{"class":1204},[934,2123,1208],{"class":983},[934,2125,1949],{"class":1019},[934,2127,1214],{"class":983},[934,2129,2130],{"class":979,"line":1110},[934,2131,1299],{"class":983},[934,2133,2134],{"class":979,"line":1137},[934,2135,1461],{"emptyLinePlaceholder":21},[934,2137,2138,2140,2142],{"class":979,"line":1164},[934,2139,1310],{"class":983},[934,2141,1314],{"class":1313},[934,2143,1194],{"class":983},[934,2145,2146,2148,2150,2152],{"class":979,"line":1503},[934,2147,1924],{"class":1019},[934,2149,927],{"class":983},[934,2151,1622],{"class":1019},[934,2153,1443],{"class":983},[934,2155,2156],{"class":979,"line":1519},[934,2157,1299],{"class":983},[905,2159,2161],{"id":2160},"background","Background",[910,2163,2164,2165,923,2168,927],{},"Nuxt UI provides Tailwind CSS utility classes for background colors, allowing you to use class names like ",[920,2166,2167],{},"bg-default",[920,2169,2170],{},"bg-muted",[929,2172,2173,2196],{},[910,2174,2175,2180,2183,2188,2193],{},[934,2176,2179],{"className":2177},[2167,938,939,940,941,1649,2178],"mr-2","Default",[934,2181,1654],{"className":2182},[2170,938,939,940,941,1649,2178],[934,2184,2187],{"className":2185},[2186,938,939,940,941,1649,2178],"bg-elevated","Elevated",[934,2189,2192],{"className":2190},[2191,938,939,940,941,1649,2178],"bg-accented","Accented",[934,2194,1674],{"className":2195},[1673,1672,938,939,940,941,1649],[967,2197,2198],{"v-slot:code":969},[971,2199,2201],{"className":973,"code":2200,"language":34,"meta":969,"style":969},"\u003Ctemplate>\n  \u003Cdiv class=\"bg-default\">Default\u003C/div>\n  \u003Cdiv class=\"bg-muted\">Muted\u003C/div>\n  \u003Cdiv class=\"bg-elevated\">Elevated\u003C/div>\n  \u003Cdiv class=\"bg-accented\">Accented\u003C/div>\n  \u003Cdiv class=\"bg-inverted text-inverted\">Inverted\u003C/div>\n\u003C/template>\n",[920,2202,2203,2211,2238,2264,2290,2316,2343],{"__ignoreMap":969},[934,2204,2205,2207,2209],{"class":979,"line":980},[934,2206,984],{"class":983},[934,2208,967],{"class":987},[934,2210,990],{"class":983},[934,2212,2213,2215,2218,2220,2222,2224,2226,2228,2230,2232,2234,2236],{"class":979,"line":993},[934,2214,996],{"class":983},[934,2216,2217],{"class":987},"div",[934,2219,1002],{"class":1001},[934,2221,1005],{"class":983},[934,2223,1008],{"class":983},[934,2225,2167],{"class":1011},[934,2227,1008],{"class":983},[934,2229,1016],{"class":983},[934,2231,2179],{"class":1019},[934,2233,1022],{"class":983},[934,2235,2217],{"class":987},[934,2237,990],{"class":983},[934,2239,2240,2242,2244,2246,2248,2250,2252,2254,2256,2258,2260,2262],{"class":979,"line":1029},[934,2241,996],{"class":983},[934,2243,2217],{"class":987},[934,2245,1002],{"class":1001},[934,2247,1005],{"class":983},[934,2249,1008],{"class":983},[934,2251,2170],{"class":1011},[934,2253,1008],{"class":983},[934,2255,1016],{"class":983},[934,2257,1654],{"class":1019},[934,2259,1022],{"class":983},[934,2261,2217],{"class":987},[934,2263,990],{"class":983},[934,2265,2266,2268,2270,2272,2274,2276,2278,2280,2282,2284,2286,2288],{"class":979,"line":1056},[934,2267,996],{"class":983},[934,2269,2217],{"class":987},[934,2271,1002],{"class":1001},[934,2273,1005],{"class":983},[934,2275,1008],{"class":983},[934,2277,2186],{"class":1011},[934,2279,1008],{"class":983},[934,2281,1016],{"class":983},[934,2283,2187],{"class":1019},[934,2285,1022],{"class":983},[934,2287,2217],{"class":987},[934,2289,990],{"class":983},[934,2291,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310,2312,2314],{"class":979,"line":1083},[934,2293,996],{"class":983},[934,2295,2217],{"class":987},[934,2297,1002],{"class":1001},[934,2299,1005],{"class":983},[934,2301,1008],{"class":983},[934,2303,2191],{"class":1011},[934,2305,1008],{"class":983},[934,2307,1016],{"class":983},[934,2309,2192],{"class":1019},[934,2311,1022],{"class":983},[934,2313,2217],{"class":987},[934,2315,990],{"class":983},[934,2317,2318,2320,2322,2324,2326,2328,2331,2333,2335,2337,2339,2341],{"class":979,"line":1110},[934,2319,996],{"class":983},[934,2321,2217],{"class":987},[934,2323,1002],{"class":1001},[934,2325,1005],{"class":983},[934,2327,1008],{"class":983},[934,2329,2330],{"class":1011},"bg-inverted text-inverted",[934,2332,1008],{"class":983},[934,2334,1016],{"class":983},[934,2336,1674],{"class":1019},[934,2338,1022],{"class":983},[934,2340,2217],{"class":987},[934,2342,990],{"class":983},[934,2344,2345,2347,2349],{"class":979,"line":1137},[934,2346,1022],{"class":983},[934,2348,967],{"class":987},[934,2350,990],{"class":983},[910,2352,1173],{},[1175,2354,2355,2445],{},[971,2356,2358],{"className":1179,"code":2357,"filename":1181,"language":1182,"meta":969,"style":969},":root {\n  --ui-bg: white;\n  --ui-bg-muted: var(--ui-color-neutral-50);\n  --ui-bg-elevated: var(--ui-color-neutral-100);\n  --ui-bg-accented: var(--ui-color-neutral-200);\n  --ui-bg-inverted: var(--ui-color-neutral-900);\n}\n",[920,2359,2360,2368,2379,2395,2411,2426,2441],{"__ignoreMap":969},[934,2361,2362,2364,2366],{"class":979,"line":980},[934,2363,927],{"class":983},[934,2365,1191],{"class":1001},[934,2367,1194],{"class":983},[934,2369,2370,2373,2375,2377],{"class":979,"line":993},[934,2371,2372],{"class":1019},"  --ui-bg",[934,2374,927],{"class":983},[934,2376,1622],{"class":1019},[934,2378,1443],{"class":983},[934,2380,2381,2384,2386,2388,2390,2393],{"class":979,"line":1029},[934,2382,2383],{"class":1019},"  --ui-bg-muted",[934,2385,927],{"class":983},[934,2387,1205],{"class":1204},[934,2389,1208],{"class":983},[934,2391,2392],{"class":1019},"--ui-color-neutral-50",[934,2394,1214],{"class":983},[934,2396,2397,2400,2402,2404,2406,2409],{"class":979,"line":1056},[934,2398,2399],{"class":1019},"  --ui-bg-elevated",[934,2401,927],{"class":983},[934,2403,1205],{"class":1204},[934,2405,1208],{"class":983},[934,2407,2408],{"class":1019},"--ui-color-neutral-100",[934,2410,1214],{"class":983},[934,2412,2413,2416,2418,2420,2422,2424],{"class":979,"line":1083},[934,2414,2415],{"class":1019},"  --ui-bg-accented",[934,2417,927],{"class":983},[934,2419,1205],{"class":1204},[934,2421,1208],{"class":983},[934,2423,2035],{"class":1019},[934,2425,1214],{"class":983},[934,2427,2428,2431,2433,2435,2437,2439],{"class":979,"line":1110},[934,2429,2430],{"class":1019},"  --ui-bg-inverted",[934,2432,927],{"class":983},[934,2434,1205],{"class":1204},[934,2436,1208],{"class":983},[934,2438,1949],{"class":1019},[934,2440,1214],{"class":983},[934,2442,2443],{"class":979,"line":1137},[934,2444,1299],{"class":983},[971,2446,2448],{"className":1179,"code":2447,"filename":1303,"language":1182,"meta":969,"style":969},".dark {\n  --ui-bg: var(--ui-color-neutral-900);\n  --ui-bg-muted: var(--ui-color-neutral-800);\n  --ui-bg-elevated: var(--ui-color-neutral-800);\n  --ui-bg-accented: var(--ui-color-neutral-700);\n  --ui-bg-inverted: white;\n}\n",[920,2449,2450,2458,2472,2487,2501,2515,2525],{"__ignoreMap":969},[934,2451,2452,2454,2456],{"class":979,"line":980},[934,2453,1310],{"class":983},[934,2455,1314],{"class":1313},[934,2457,1194],{"class":983},[934,2459,2460,2462,2464,2466,2468,2470],{"class":979,"line":993},[934,2461,2372],{"class":1019},[934,2463,927],{"class":983},[934,2465,1205],{"class":1204},[934,2467,1208],{"class":983},[934,2469,1949],{"class":1019},[934,2471,1214],{"class":983},[934,2473,2474,2476,2478,2480,2482,2485],{"class":979,"line":1029},[934,2475,2383],{"class":1019},[934,2477,927],{"class":983},[934,2479,1205],{"class":1204},[934,2481,1208],{"class":983},[934,2483,2484],{"class":1019},"--ui-color-neutral-800",[934,2486,1214],{"class":983},[934,2488,2489,2491,2493,2495,2497,2499],{"class":979,"line":1056},[934,2490,2399],{"class":1019},[934,2492,927],{"class":983},[934,2494,1205],{"class":1204},[934,2496,1208],{"class":983},[934,2498,2484],{"class":1019},[934,2500,1214],{"class":983},[934,2502,2503,2505,2507,2509,2511,2513],{"class":979,"line":1083},[934,2504,2415],{"class":1019},[934,2506,927],{"class":983},[934,2508,1205],{"class":1204},[934,2510,1208],{"class":983},[934,2512,1933],{"class":1019},[934,2514,1214],{"class":983},[934,2516,2517,2519,2521,2523],{"class":979,"line":1110},[934,2518,2430],{"class":1019},[934,2520,927],{"class":983},[934,2522,1622],{"class":1019},[934,2524,1443],{"class":983},[934,2526,2527],{"class":979,"line":1137},[934,2528,1299],{"class":983},[1412,2530,2531,2535],{},[910,2532,2070,2533,1420],{},[920,2534,1419],{},[971,2536,2538],{"className":1179,"code":2537,"filename":1424,"language":1182,"meta":969,"style":969},"@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n:root {\n  --ui-bg: var(--ui-color-neutral-50);\n}\n\n.dark {\n  --ui-bg: var(--ui-color-neutral-950);\n}\n",[920,2539,2540,2552,2564,2568,2576,2590,2594,2598,2606,2621],{"__ignoreMap":969},[934,2541,2542,2544,2546,2548,2550],{"class":979,"line":980},[934,2543,1432],{"class":1431},[934,2545,1435],{"class":983},[934,2547,1438],{"class":1011},[934,2549,1008],{"class":983},[934,2551,1443],{"class":983},[934,2553,2554,2556,2558,2560,2562],{"class":979,"line":993},[934,2555,1432],{"class":1431},[934,2557,1435],{"class":983},[934,2559,1452],{"class":1011},[934,2561,1008],{"class":983},[934,2563,1443],{"class":983},[934,2565,2566],{"class":979,"line":1029},[934,2567,1461],{"emptyLinePlaceholder":21},[934,2569,2570,2572,2574],{"class":979,"line":1056},[934,2571,927],{"class":983},[934,2573,1191],{"class":1001},[934,2575,1194],{"class":983},[934,2577,2578,2580,2582,2584,2586,2588],{"class":979,"line":1083},[934,2579,2372],{"class":1019},[934,2581,927],{"class":983},[934,2583,1205],{"class":1204},[934,2585,1208],{"class":983},[934,2587,2392],{"class":1019},[934,2589,1214],{"class":983},[934,2591,2592],{"class":979,"line":1110},[934,2593,1299],{"class":983},[934,2595,2596],{"class":979,"line":1137},[934,2597,1461],{"emptyLinePlaceholder":21},[934,2599,2600,2602,2604],{"class":979,"line":1164},[934,2601,1310],{"class":983},[934,2603,1314],{"class":1313},[934,2605,1194],{"class":983},[934,2607,2608,2610,2612,2614,2616,2619],{"class":979,"line":1503},[934,2609,2372],{"class":1019},[934,2611,927],{"class":983},[934,2613,1205],{"class":1204},[934,2615,1208],{"class":983},[934,2617,2618],{"class":1019},"--ui-color-neutral-950",[934,2620,1214],{"class":983},[934,2622,2623],{"class":979,"line":1519},[934,2624,1299],{"class":983},[905,2626,2628],{"id":2627},"border","Border",[910,2630,2631,2632,923,2635,927],{},"Nuxt UI provides Tailwind CSS utility classes for border colors, allowing you to use class names like ",[920,2633,2634],{},"border-default",[920,2636,2637],{},"border-muted",[929,2639,2640,2657],{},[910,2641,2642,2646,2649,2653],{},[934,2643,2179],{"className":2644},[2645,2634,938,939,940,941,1649,2178],"border-2",[934,2647,1654],{"className":2648},[2645,2637,938,939,940,941,1649,2178],[934,2650,2192],{"className":2651},[2645,2652,938,939,940,941,1649,2178],"border-accented",[934,2654,1674],{"className":2655},[2645,2656,938,939,940,941,1649],"border-inverted",[967,2658,2659],{"v-slot:code":969},[971,2660,2662],{"className":973,"code":2661,"language":34,"meta":969,"style":969},"\u003Ctemplate>\n  \u003Cdiv class=\"border border-default\">Default\u003C/div>\n  \u003Cdiv class=\"border border-muted\">Muted\u003C/div>\n  \u003Cdiv class=\"border border-accented\">Accented\u003C/div>\n  \u003Cdiv class=\"border border-inverted\">Inverted\u003C/div>\n\u003C/template>\n",[920,2663,2664,2672,2699,2726,2753,2780],{"__ignoreMap":969},[934,2665,2666,2668,2670],{"class":979,"line":980},[934,2667,984],{"class":983},[934,2669,967],{"class":987},[934,2671,990],{"class":983},[934,2673,2674,2676,2678,2680,2682,2684,2687,2689,2691,2693,2695,2697],{"class":979,"line":993},[934,2675,996],{"class":983},[934,2677,2217],{"class":987},[934,2679,1002],{"class":1001},[934,2681,1005],{"class":983},[934,2683,1008],{"class":983},[934,2685,2686],{"class":1011},"border border-default",[934,2688,1008],{"class":983},[934,2690,1016],{"class":983},[934,2692,2179],{"class":1019},[934,2694,1022],{"class":983},[934,2696,2217],{"class":987},[934,2698,990],{"class":983},[934,2700,2701,2703,2705,2707,2709,2711,2714,2716,2718,2720,2722,2724],{"class":979,"line":1029},[934,2702,996],{"class":983},[934,2704,2217],{"class":987},[934,2706,1002],{"class":1001},[934,2708,1005],{"class":983},[934,2710,1008],{"class":983},[934,2712,2713],{"class":1011},"border border-muted",[934,2715,1008],{"class":983},[934,2717,1016],{"class":983},[934,2719,1654],{"class":1019},[934,2721,1022],{"class":983},[934,2723,2217],{"class":987},[934,2725,990],{"class":983},[934,2727,2728,2730,2732,2734,2736,2738,2741,2743,2745,2747,2749,2751],{"class":979,"line":1056},[934,2729,996],{"class":983},[934,2731,2217],{"class":987},[934,2733,1002],{"class":1001},[934,2735,1005],{"class":983},[934,2737,1008],{"class":983},[934,2739,2740],{"class":1011},"border border-accented",[934,2742,1008],{"class":983},[934,2744,1016],{"class":983},[934,2746,2192],{"class":1019},[934,2748,1022],{"class":983},[934,2750,2217],{"class":987},[934,2752,990],{"class":983},[934,2754,2755,2757,2759,2761,2763,2765,2768,2770,2772,2774,2776,2778],{"class":979,"line":1083},[934,2756,996],{"class":983},[934,2758,2217],{"class":987},[934,2760,1002],{"class":1001},[934,2762,1005],{"class":983},[934,2764,1008],{"class":983},[934,2766,2767],{"class":1011},"border border-inverted",[934,2769,1008],{"class":983},[934,2771,1016],{"class":983},[934,2773,1674],{"class":1019},[934,2775,1022],{"class":983},[934,2777,2217],{"class":987},[934,2779,990],{"class":983},[934,2781,2782,2784,2786],{"class":979,"line":1110},[934,2783,1022],{"class":983},[934,2785,967],{"class":987},[934,2787,990],{"class":983},[910,2789,1173],{},[1175,2791,2792,2869],{},[971,2793,2795],{"className":1179,"code":2794,"filename":1181,"language":1182,"meta":969,"style":969},":root {\n  --ui-border: var(--ui-color-neutral-200);\n  --ui-border-muted: var(--ui-color-neutral-200);\n  --ui-border-accented: var(--ui-color-neutral-300);\n  --ui-border-inverted: var(--ui-color-neutral-900);\n}\n",[920,2796,2797,2805,2820,2835,2850,2865],{"__ignoreMap":969},[934,2798,2799,2801,2803],{"class":979,"line":980},[934,2800,927],{"class":983},[934,2802,1191],{"class":1001},[934,2804,1194],{"class":983},[934,2806,2807,2810,2812,2814,2816,2818],{"class":979,"line":993},[934,2808,2809],{"class":1019},"  --ui-border",[934,2811,927],{"class":983},[934,2813,1205],{"class":1204},[934,2815,1208],{"class":983},[934,2817,2035],{"class":1019},[934,2819,1214],{"class":983},[934,2821,2822,2825,2827,2829,2831,2833],{"class":979,"line":1029},[934,2823,2824],{"class":1019},"  --ui-border-muted",[934,2826,927],{"class":983},[934,2828,1205],{"class":1204},[934,2830,1208],{"class":983},[934,2832,2035],{"class":1019},[934,2834,1214],{"class":983},[934,2836,2837,2840,2842,2844,2846,2848],{"class":979,"line":1056},[934,2838,2839],{"class":1019},"  --ui-border-accented",[934,2841,927],{"class":983},[934,2843,1205],{"class":1204},[934,2845,1208],{"class":983},[934,2847,2020],{"class":1019},[934,2849,1214],{"class":983},[934,2851,2852,2855,2857,2859,2861,2863],{"class":979,"line":1083},[934,2853,2854],{"class":1019},"  --ui-border-inverted",[934,2856,927],{"class":983},[934,2858,1205],{"class":1204},[934,2860,1208],{"class":983},[934,2862,1949],{"class":1019},[934,2864,1214],{"class":983},[934,2866,2867],{"class":979,"line":1110},[934,2868,1299],{"class":983},[971,2870,2872],{"className":1179,"code":2871,"filename":1303,"language":1182,"meta":969,"style":969},".dark {\n  --ui-border: var(--ui-color-neutral-800);\n  --ui-border-muted: var(--ui-color-neutral-700);\n  --ui-border-accented: var(--ui-color-neutral-700);\n  --ui-border-inverted: white;\n}\n",[920,2873,2874,2882,2896,2910,2924,2934],{"__ignoreMap":969},[934,2875,2876,2878,2880],{"class":979,"line":980},[934,2877,1310],{"class":983},[934,2879,1314],{"class":1313},[934,2881,1194],{"class":983},[934,2883,2884,2886,2888,2890,2892,2894],{"class":979,"line":993},[934,2885,2809],{"class":1019},[934,2887,927],{"class":983},[934,2889,1205],{"class":1204},[934,2891,1208],{"class":983},[934,2893,2484],{"class":1019},[934,2895,1214],{"class":983},[934,2897,2898,2900,2902,2904,2906,2908],{"class":979,"line":1029},[934,2899,2824],{"class":1019},[934,2901,927],{"class":983},[934,2903,1205],{"class":1204},[934,2905,1208],{"class":983},[934,2907,1933],{"class":1019},[934,2909,1214],{"class":983},[934,2911,2912,2914,2916,2918,2920,2922],{"class":979,"line":1056},[934,2913,2839],{"class":1019},[934,2915,927],{"class":983},[934,2917,1205],{"class":1204},[934,2919,1208],{"class":983},[934,2921,1933],{"class":1019},[934,2923,1214],{"class":983},[934,2925,2926,2928,2930,2932],{"class":979,"line":1083},[934,2927,2854],{"class":1019},[934,2929,927],{"class":983},[934,2931,1622],{"class":1019},[934,2933,1443],{"class":983},[934,2935,2936],{"class":979,"line":1110},[934,2937,1299],{"class":983},[1412,2939,2940,2944],{},[910,2941,2070,2942,1420],{},[920,2943,1419],{},[971,2945,2947],{"className":1179,"code":2946,"filename":1424,"language":1182,"meta":969,"style":969},"@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n:root {\n  --ui-border: var(--ui-color-neutral-100);\n}\n\n.dark {\n  --ui-border: var(--ui-color-neutral-900);\n}\n",[920,2948,2949,2961,2973,2977,2985,2999,3003,3007,3015,3029],{"__ignoreMap":969},[934,2950,2951,2953,2955,2957,2959],{"class":979,"line":980},[934,2952,1432],{"class":1431},[934,2954,1435],{"class":983},[934,2956,1438],{"class":1011},[934,2958,1008],{"class":983},[934,2960,1443],{"class":983},[934,2962,2963,2965,2967,2969,2971],{"class":979,"line":993},[934,2964,1432],{"class":1431},[934,2966,1435],{"class":983},[934,2968,1452],{"class":1011},[934,2970,1008],{"class":983},[934,2972,1443],{"class":983},[934,2974,2975],{"class":979,"line":1029},[934,2976,1461],{"emptyLinePlaceholder":21},[934,2978,2979,2981,2983],{"class":979,"line":1056},[934,2980,927],{"class":983},[934,2982,1191],{"class":1001},[934,2984,1194],{"class":983},[934,2986,2987,2989,2991,2993,2995,2997],{"class":979,"line":1083},[934,2988,2809],{"class":1019},[934,2990,927],{"class":983},[934,2992,1205],{"class":1204},[934,2994,1208],{"class":983},[934,2996,2408],{"class":1019},[934,2998,1214],{"class":983},[934,3000,3001],{"class":979,"line":1110},[934,3002,1299],{"class":983},[934,3004,3005],{"class":979,"line":1137},[934,3006,1461],{"emptyLinePlaceholder":21},[934,3008,3009,3011,3013],{"class":979,"line":1164},[934,3010,1310],{"class":983},[934,3012,1314],{"class":1313},[934,3014,1194],{"class":983},[934,3016,3017,3019,3021,3023,3025,3027],{"class":979,"line":1503},[934,3018,2809],{"class":1019},[934,3020,927],{"class":983},[934,3022,1205],{"class":1204},[934,3024,1208],{"class":983},[934,3026,1949],{"class":1019},[934,3028,1214],{"class":983},[934,3030,3031],{"class":979,"line":1519},[934,3032,1299],{"class":983},[905,3034,3036],{"id":3035},"radius","Radius",[910,3038,3039,3040,3043,3044,3050,3051,923,3054,927],{},"Nuxt UI overrides Tailwind CSS's default ",[920,3041,3042],{},"rounded-*"," utilities with a unified border radius system, allowing you to use regular ",[914,3045,3049],{"href":3046,"rel":3047},"https://tailwindcss.com/docs/border-radius",[3048],"nofollow","border radius utilities"," like ",[920,3052,3053],{},"rounded-xs",[920,3055,3056],{},"rounded-2xl",[929,3058,3059,3093],{},[910,3060,3061,3065,3070,3074,3079,3084,3088],{},[934,3062,3064],{"className":3063},[2645,2652,938,939,940,941,3053,2178],"xs",[934,3066,3069],{"className":3067},[2645,2652,938,939,940,941,3068,2178],"rounded-sm","sm",[934,3071,3073],{"className":3072},[2645,2652,938,939,940,941,1649,2178],"md",[934,3075,3078],{"className":3076},[2645,2652,938,939,940,941,3077,2178],"rounded-lg","lg",[934,3080,3083],{"className":3081},[2645,2652,938,939,940,941,3082,2178],"rounded-xl","xl",[934,3085,3087],{"className":3086},[2645,2652,938,939,940,941,3056,2178],"2xl",[934,3089,3092],{"className":3090},[2645,2652,938,939,940,941,3091,2178],"rounded-3xl","3xl",[967,3094,3095],{"v-slot:code":969},[971,3096,3098],{"className":973,"code":3097,"language":34,"meta":969,"style":969},"\u003Ctemplate>\n  \u003Cdiv class=\"rounded-xs\">xs\u003C/div>\n  \u003Cdiv class=\"rounded-sm\">sm\u003C/div>\n  \u003Cdiv class=\"rounded-md\">md\u003C/div>\n  \u003Cdiv class=\"rounded-lg\">lg\u003C/div>\n  \u003Cdiv class=\"rounded-xl\">xl\u003C/div>\n  \u003Cdiv class=\"rounded-2xl\">2xl\u003C/div>\n  \u003Cdiv class=\"rounded-3xl\">3xl\u003C/div>\n\u003C/template>\n",[920,3099,3100,3108,3134,3160,3186,3212,3238,3264,3290],{"__ignoreMap":969},[934,3101,3102,3104,3106],{"class":979,"line":980},[934,3103,984],{"class":983},[934,3105,967],{"class":987},[934,3107,990],{"class":983},[934,3109,3110,3112,3114,3116,3118,3120,3122,3124,3126,3128,3130,3132],{"class":979,"line":993},[934,3111,996],{"class":983},[934,3113,2217],{"class":987},[934,3115,1002],{"class":1001},[934,3117,1005],{"class":983},[934,3119,1008],{"class":983},[934,3121,3053],{"class":1011},[934,3123,1008],{"class":983},[934,3125,1016],{"class":983},[934,3127,3064],{"class":1019},[934,3129,1022],{"class":983},[934,3131,2217],{"class":987},[934,3133,990],{"class":983},[934,3135,3136,3138,3140,3142,3144,3146,3148,3150,3152,3154,3156,3158],{"class":979,"line":1029},[934,3137,996],{"class":983},[934,3139,2217],{"class":987},[934,3141,1002],{"class":1001},[934,3143,1005],{"class":983},[934,3145,1008],{"class":983},[934,3147,3068],{"class":1011},[934,3149,1008],{"class":983},[934,3151,1016],{"class":983},[934,3153,3069],{"class":1019},[934,3155,1022],{"class":983},[934,3157,2217],{"class":987},[934,3159,990],{"class":983},[934,3161,3162,3164,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184],{"class":979,"line":1056},[934,3163,996],{"class":983},[934,3165,2217],{"class":987},[934,3167,1002],{"class":1001},[934,3169,1005],{"class":983},[934,3171,1008],{"class":983},[934,3173,1649],{"class":1011},[934,3175,1008],{"class":983},[934,3177,1016],{"class":983},[934,3179,3073],{"class":1019},[934,3181,1022],{"class":983},[934,3183,2217],{"class":987},[934,3185,990],{"class":983},[934,3187,3188,3190,3192,3194,3196,3198,3200,3202,3204,3206,3208,3210],{"class":979,"line":1083},[934,3189,996],{"class":983},[934,3191,2217],{"class":987},[934,3193,1002],{"class":1001},[934,3195,1005],{"class":983},[934,3197,1008],{"class":983},[934,3199,3077],{"class":1011},[934,3201,1008],{"class":983},[934,3203,1016],{"class":983},[934,3205,3078],{"class":1019},[934,3207,1022],{"class":983},[934,3209,2217],{"class":987},[934,3211,990],{"class":983},[934,3213,3214,3216,3218,3220,3222,3224,3226,3228,3230,3232,3234,3236],{"class":979,"line":1110},[934,3215,996],{"class":983},[934,3217,2217],{"class":987},[934,3219,1002],{"class":1001},[934,3221,1005],{"class":983},[934,3223,1008],{"class":983},[934,3225,3082],{"class":1011},[934,3227,1008],{"class":983},[934,3229,1016],{"class":983},[934,3231,3083],{"class":1019},[934,3233,1022],{"class":983},[934,3235,2217],{"class":987},[934,3237,990],{"class":983},[934,3239,3240,3242,3244,3246,3248,3250,3252,3254,3256,3258,3260,3262],{"class":979,"line":1137},[934,3241,996],{"class":983},[934,3243,2217],{"class":987},[934,3245,1002],{"class":1001},[934,3247,1005],{"class":983},[934,3249,1008],{"class":983},[934,3251,3056],{"class":1011},[934,3253,1008],{"class":983},[934,3255,1016],{"class":983},[934,3257,3087],{"class":1019},[934,3259,1022],{"class":983},[934,3261,2217],{"class":987},[934,3263,990],{"class":983},[934,3265,3266,3268,3270,3272,3274,3276,3278,3280,3282,3284,3286,3288],{"class":979,"line":1164},[934,3267,996],{"class":983},[934,3269,2217],{"class":987},[934,3271,1002],{"class":1001},[934,3273,1005],{"class":983},[934,3275,1008],{"class":983},[934,3277,3091],{"class":1011},[934,3279,1008],{"class":983},[934,3281,1016],{"class":983},[934,3283,3092],{"class":1019},[934,3285,1022],{"class":983},[934,3287,2217],{"class":987},[934,3289,990],{"class":983},[934,3291,3292,3294,3296],{"class":979,"line":1503},[934,3293,1022],{"class":983},[934,3295,967],{"class":987},[934,3297,990],{"class":983},[910,3299,3300,3301,3304],{},"These utility classes are calculated based on a global ",[920,3302,3303],{},"--ui-radius"," CSS variable, which defines the base radius value applied across all components for a consistent look.",[971,3306,3308],{"className":1179,"code":3307,"language":1182,"meta":969,"style":969},":root {\n  --ui-radius: 0.25rem;\n}\n",[920,3309,3310,3318,3331],{"__ignoreMap":969},[934,3311,3312,3314,3316],{"class":979,"line":980},[934,3313,927],{"class":983},[934,3315,1191],{"class":1001},[934,3317,1194],{"class":983},[934,3319,3320,3323,3325,3329],{"class":979,"line":993},[934,3321,3322],{"class":1019},"  --ui-radius",[934,3324,927],{"class":983},[934,3326,3328],{"class":3327},"sbssI"," 0.25rem",[934,3330,1443],{"class":983},[934,3332,3333],{"class":979,"line":1029},[934,3334,1299],{"class":983},[1412,3336,3337,3342],{},[910,3338,3339,3340,1420],{},"You can customize the base radius value in your ",[920,3341,1419],{},[971,3343,3345],{"className":1179,"code":3344,"filename":1424,"language":1182,"meta":969,"style":969},"@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n:root {\n  --ui-radius: 0.5rem;\n}\n",[920,3346,3347,3359,3371,3375,3383,3394],{"__ignoreMap":969},[934,3348,3349,3351,3353,3355,3357],{"class":979,"line":980},[934,3350,1432],{"class":1431},[934,3352,1435],{"class":983},[934,3354,1438],{"class":1011},[934,3356,1008],{"class":983},[934,3358,1443],{"class":983},[934,3360,3361,3363,3365,3367,3369],{"class":979,"line":993},[934,3362,1432],{"class":1431},[934,3364,1435],{"class":983},[934,3366,1452],{"class":1011},[934,3368,1008],{"class":983},[934,3370,1443],{"class":983},[934,3372,3373],{"class":979,"line":1029},[934,3374,1461],{"emptyLinePlaceholder":21},[934,3376,3377,3379,3381],{"class":979,"line":1056},[934,3378,927],{"class":983},[934,3380,1191],{"class":1001},[934,3382,1194],{"class":983},[934,3384,3385,3387,3389,3392],{"class":979,"line":1083},[934,3386,3322],{"class":1019},[934,3388,927],{"class":983},[934,3390,3391],{"class":3327}," 0.5rem",[934,3393,1443],{"class":983},[934,3395,3396],{"class":979,"line":1110},[934,3397,1299],{"class":983},[3399,3400,3401],"note",{},[910,3402,3403,3404,3408],{},"Try the ",[3405,3406],"prose-icon",{"className":3407,"name":69},[937]," theme picker in the header above to change the base radius value.",[905,3410,336],{"id":3411},"container",[910,3413,3414,3415,3418,3419,3421],{},"Nuxt UI provides a ",[920,3416,3417],{},"--ui-container"," CSS variable that controls the maximum width of the ",[914,3420,336],{"href":337}," component.",[971,3423,3425],{"className":1179,"code":3424,"language":1182,"meta":969,"style":969},":root {\n  --ui-container: 80rem; /* var(--container-7xl) */\n}\n",[920,3426,3427,3435,3452],{"__ignoreMap":969},[934,3428,3429,3431,3433],{"class":979,"line":980},[934,3430,927],{"class":983},[934,3432,1191],{"class":1001},[934,3434,1194],{"class":983},[934,3436,3437,3440,3442,3445,3448],{"class":979,"line":993},[934,3438,3439],{"class":1019},"  --ui-container",[934,3441,927],{"class":983},[934,3443,3444],{"class":3327}," 80rem",[934,3446,3447],{"class":983},";",[934,3449,3451],{"class":3450},"sHwdD"," /* var(--container-7xl) */\n",[934,3453,3454],{"class":979,"line":1029},[934,3455,1299],{"class":983},[1412,3457,3458,3464],{},[910,3459,3460,3461,3463],{},"You can customize this value in your ",[920,3462,1419],{}," file to adjust container widths consistently throughout your application:",[971,3465,3467],{"className":1179,"code":3466,"filename":1424,"language":1182,"meta":969,"style":969},"@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n@theme {\n  --container-8xl: 90rem;\n}\n\n:root {\n  --ui-container: var(--container-8xl);\n}\n",[920,3468,3469,3481,3493,3497,3504,3509,3513,3517,3525,3540],{"__ignoreMap":969},[934,3470,3471,3473,3475,3477,3479],{"class":979,"line":980},[934,3472,1432],{"class":1431},[934,3474,1435],{"class":983},[934,3476,1438],{"class":1011},[934,3478,1008],{"class":983},[934,3480,1443],{"class":983},[934,3482,3483,3485,3487,3489,3491],{"class":979,"line":993},[934,3484,1432],{"class":1431},[934,3486,1435],{"class":983},[934,3488,1452],{"class":1011},[934,3490,1008],{"class":983},[934,3492,1443],{"class":983},[934,3494,3495],{"class":979,"line":1029},[934,3496,1461],{"emptyLinePlaceholder":21},[934,3498,3499,3502],{"class":979,"line":1056},[934,3500,3501],{"class":1431},"@theme",[934,3503,1194],{"class":983},[934,3505,3506],{"class":979,"line":1083},[934,3507,3508],{"class":1019},"  --container-8xl: 90rem;\n",[934,3510,3511],{"class":979,"line":1110},[934,3512,1299],{"class":1019},[934,3514,3515],{"class":979,"line":1137},[934,3516,1461],{"emptyLinePlaceholder":21},[934,3518,3519,3521,3523],{"class":979,"line":1164},[934,3520,927],{"class":983},[934,3522,1191],{"class":1001},[934,3524,1194],{"class":983},[934,3526,3527,3529,3531,3533,3535,3538],{"class":979,"line":1503},[934,3528,3439],{"class":1019},[934,3530,927],{"class":983},[934,3532,1205],{"class":1204},[934,3534,1208],{"class":983},[934,3536,3537],{"class":1019},"--container-8xl",[934,3539,1214],{"class":983},[934,3541,3542],{"class":979,"line":1519},[934,3543,1299],{"class":983},[905,3545,506],{"id":3546},"header",[910,3548,3414,3549,3552,3553,3421],{},[920,3550,3551],{},"--ui-header-height"," CSS variable that controls the height of the ",[914,3554,506],{"href":507},[971,3556,3558],{"className":1179,"code":3557,"language":1182,"meta":969,"style":969},":root {\n  --ui-header-height: --spacing(16);\n}\n",[920,3559,3560,3568,3586],{"__ignoreMap":969},[934,3561,3562,3564,3566],{"class":979,"line":980},[934,3563,927],{"class":983},[934,3565,1191],{"class":1001},[934,3567,1194],{"class":983},[934,3569,3570,3573,3575,3578,3581,3584],{"class":979,"line":993},[934,3571,3572],{"class":1019},"  --ui-header-height",[934,3574,927],{"class":983},[934,3576,3577],{"class":1019}," --spacing(",[934,3579,3580],{"class":3327},"16",[934,3582,3583],{"class":1019},")",[934,3585,1443],{"class":983},[934,3587,3588],{"class":979,"line":1029},[934,3589,1299],{"class":983},[1412,3591,3592,3597],{},[910,3593,3460,3594,3596],{},[920,3595,1419],{}," to adjust header height consistently throughout your application:",[971,3598,3600],{"className":1179,"code":3599,"filename":1424,"language":1182,"meta":969,"style":969},"@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n:root {\n  --ui-header-height: --spacing(24);\n}\n",[920,3601,3602,3614,3626,3630,3638,3653],{"__ignoreMap":969},[934,3603,3604,3606,3608,3610,3612],{"class":979,"line":980},[934,3605,1432],{"class":1431},[934,3607,1435],{"class":983},[934,3609,1438],{"class":1011},[934,3611,1008],{"class":983},[934,3613,1443],{"class":983},[934,3615,3616,3618,3620,3622,3624],{"class":979,"line":993},[934,3617,1432],{"class":1431},[934,3619,1435],{"class":983},[934,3621,1452],{"class":1011},[934,3623,1008],{"class":983},[934,3625,1443],{"class":983},[934,3627,3628],{"class":979,"line":1029},[934,3629,1461],{"emptyLinePlaceholder":21},[934,3631,3632,3634,3636],{"class":979,"line":1056},[934,3633,927],{"class":983},[934,3635,1191],{"class":1001},[934,3637,1194],{"class":983},[934,3639,3640,3642,3644,3646,3649,3651],{"class":979,"line":1083},[934,3641,3572],{"class":1019},[934,3643,927],{"class":983},[934,3645,3577],{"class":1019},[934,3647,3648],{"class":3327},"24",[934,3650,3583],{"class":1019},[934,3652,1443],{"class":983},[934,3654,3655],{"class":979,"line":1110},[934,3656,1299],{"class":983},[905,3658,3660],{"id":3659},"body","Body",[910,3662,3663,3664,3674],{},"Nuxt UI applies default classes on the ",[920,3665,3668,3670,3672],{"className":3666,"language":3667,"style":969},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","html",[934,3669,984],{"class":983},[934,3671,3659],{"class":987},[934,3673,1016],{"class":983}," element of your app for consistent theming across light and dark modes:",[971,3676,3678],{"className":1179,"code":3677,"language":1182,"meta":969,"style":969},"body {\n  @apply antialiased text-default bg-default scheme-light dark:scheme-dark;\n}\n",[920,3679,3680,3686,3698],{"__ignoreMap":969},[934,3681,3682,3684],{"class":979,"line":980},[934,3683,3659],{"class":1313},[934,3685,1194],{"class":983},[934,3687,3688,3691,3693,3696],{"class":979,"line":993},[934,3689,3690],{"class":1019},"  @apply antialiased text-default bg-default scheme-light dark",[934,3692,927],{"class":983},[934,3694,3695],{"class":1019},"scheme-dark",[934,3697,1443],{"class":983},[934,3699,3700],{"class":979,"line":1029},[934,3701,1299],{"class":983},[3703,3704,3705],"style",{},"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":969,"searchDepth":993,"depth":993,"links":3707},[3708,3709,3710,3711,3712,3713,3714,3715],{"id":907,"depth":993,"text":908},{"id":1631,"depth":993,"text":1632},{"id":2160,"depth":993,"text":2161},{"id":2627,"depth":993,"text":2628},{"id":3035,"depth":993,"text":3036},{"id":3411,"depth":993,"text":336},{"id":3546,"depth":993,"text":506},{"id":3659,"depth":993,"text":3660},{},{"icon":69},{"title":65,"description":68},"yien-TPPjDZZLZtoAeeMl878AZVfeE1wXJi9fdAQBSo",{"data":3721,"body":3722},{},{"type":1191,"children":3723},[3724],{"type":172,"tag":910,"props":3725,"children":3726},{},[3727],{"type":1631,"value":68},1765201485280]