[{"data":1,"prerenderedAt":1731},["ShallowReactive",2],{"$f2ew7i0bd4w85f":3,"module":1000,"-docs-components-splitter":1009,"component-example-splitterExample":1555,"component-example-splitterExampleiITTVDKu8vbgUe_TUgdINcUFLxSEv3-4WBWBKFaeKFs":1559,"component-meta-USplitter":1560,"component-code-USplitter-_RPBPttRPrB8al43EvpaKMlwrjEEbR40fFWmz9U8YtA":1714,"component-code-USplitter-NXOSjvr5aEUYZtTrCCmGFJLONOMoMPYz8pwfCZbTGI8":1715,"component-example-splitterCollapsibleExample":1716,"component-example-splitterCollapsibleExampleiITTVDKu8vbgUe_TUgdINcUFLxSEv3-4WBWBKFaeKFs":1720,"component-example-splitterNestedExample":1721,"component-example-splitterNestedExampleiITTVDKu8vbgUe_TUgdINcUFLxSEv3-4WBWBKFaeKFs":1725,"component-example-splitterCustomHandleExample":1726,"component-example-splitterCustomHandleExampleiITTVDKu8vbgUe_TUgdINcUFLxSEv3-4WBWBKFaeKFs":1730},[4],{"title":5,"path":6,"stem":7,"children":8,"page":36},"Docs","\u002Fdocs","docs",[9,167,840,886,992],{"title":10,"path":11,"stem":12,"children":13,"framework":16,"category":16,"description":16,"to":16,"target":16,"icon":30},"Get Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002F1.index",[14,19,37,43,49,72,137,159],{"title":15,"path":11,"stem":12,"framework":16,"category":16,"description":17,"to":16,"target":16,"icon":18},"Introduction",null,"Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.","i-lucide-house",{"title":20,"framework":16,"category":16,"description":16,"to":16,"target":16,"shadow":21,"path":22,"stem":23,"children":24,"page":36},"Installation",true,"\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",[25,31],{"title":20,"path":26,"stem":27,"framework":28,"category":16,"description":29,"to":16,"target":16,"icon":30},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fnuxt","docs\u002F1.getting-started\u002F2.installation\u002F1.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,"to":16,"target":16,"icon":30},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fvue","docs\u002F1.getting-started\u002F2.installation\u002F2.vue","vue","Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.",false,{"title":38,"path":39,"stem":40,"framework":16,"category":16,"description":41,"to":16,"target":16,"icon":42},"Migration","\u002Fdocs\u002Fgetting-started\u002Fmigration","docs\u002F1.getting-started\u002F3.migration","A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.","i-lucide-arrow-right-left",{"title":44,"path":45,"stem":46,"framework":16,"category":16,"description":47,"to":16,"target":16,"icon":48},"Contribution","\u002Fdocs\u002Fgetting-started\u002Fcontribution","docs\u002F1.getting-started\u002F4.contribution","A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.","i-lucide-handshake",{"title":50,"path":51,"stem":52,"children":53,"page":36},"Theme","\u002Fdocs\u002Fgetting-started\u002Ftheme","docs\u002F1.getting-started\u002F5.theme",[54,60,66],{"title":55,"path":56,"stem":57,"framework":16,"category":16,"description":58,"to":16,"target":16,"icon":59},"Design System","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fdesign-system","docs\u002F1.getting-started\u002F5.theme\u002F1.design-system","Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.","i-lucide-palette",{"title":61,"path":62,"stem":63,"framework":16,"category":16,"description":64,"to":16,"target":16,"icon":65},"CSS Variables","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcss-variables","docs\u002F1.getting-started\u002F5.theme\u002F2.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":67,"path":68,"stem":69,"framework":16,"category":16,"description":70,"to":16,"target":16,"icon":71},"Components","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents","docs\u002F1.getting-started\u002F5.theme\u002F3.components","Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.","i-lucide-layout-grid",{"title":73,"framework":16,"category":16,"description":16,"to":16,"target":16,"path":74,"stem":75,"children":76,"page":36},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002F1.getting-started\u002F6.integrations",[77,91,97,111,125,131],{"title":78,"framework":16,"category":16,"description":16,"to":16,"target":16,"shadow":21,"path":79,"stem":80,"children":81,"page":36},"Icons","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons",[82,87],{"title":78,"path":83,"stem":84,"framework":28,"category":16,"description":85,"to":16,"target":16,"icon":86},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F1.nuxt","Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.","i-lucide-smile",{"title":78,"path":88,"stem":89,"framework":34,"category":16,"description":90,"to":16,"target":16,"icon":86},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F2.vue","Nuxt UI integrates with Iconify to access over 200,000+ icons.",{"title":92,"path":93,"stem":94,"framework":28,"category":16,"description":95,"to":16,"target":16,"icon":96},"Fonts","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffonts","docs\u002F1.getting-started\u002F6.integrations\u002F2.fonts","Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.","i-lucide-a-large-small",{"title":98,"framework":16,"category":16,"description":16,"to":16,"target":16,"shadow":21,"path":99,"stem":100,"children":101,"page":36},"Color Mode","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode",[102,107],{"title":98,"path":103,"stem":104,"framework":28,"category":16,"description":105,"to":16,"target":16,"icon":106},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F1.nuxt","Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.","i-lucide-sun-moon",{"title":98,"path":108,"stem":109,"framework":34,"category":16,"description":110,"to":16,"target":16,"icon":106},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F2.vue","Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.",{"title":112,"framework":16,"category":16,"description":16,"to":16,"target":16,"shadow":21,"path":113,"stem":114,"children":115,"page":36},"I18n","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n",[116,122],{"title":117,"path":118,"stem":119,"framework":28,"category":16,"description":120,"to":16,"target":16,"icon":121},"Internationalization (i18n)","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F1.nuxt","Nuxt UI supports 50+ locales and multi-directional (LTR\u002FRTL) internationalization.","i-lucide-languages",{"title":117,"path":123,"stem":124,"framework":34,"category":16,"description":120,"to":16,"target":16,"icon":121},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F2.vue",{"title":126,"path":127,"stem":128,"framework":28,"category":16,"description":129,"to":16,"target":16,"icon":130},"Content","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcontent","docs\u002F1.getting-started\u002F6.integrations\u002F5.content","Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.","i-simple-icons-markdown",{"title":132,"path":133,"stem":134,"framework":34,"category":16,"description":135,"to":16,"target":16,"icon":136},"SSR","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fssr","docs\u002F1.getting-started\u002F6.integrations\u002F6.ssr","Nuxt UI has first-party support for Vue SSR. This guide will help you have it fully enabled.","i-lucide-server",{"title":138,"framework":16,"category":16,"description":16,"to":16,"target":16,"path":139,"stem":140,"children":141,"page":36},"Agents","\u002Fdocs\u002Fgetting-started\u002Fai","docs\u002F1.getting-started\u002F7.ai",[142,147,153],{"title":143,"path":144,"stem":145,"framework":16,"category":16,"description":146,"to":16,"target":16,"icon":136},"MCP Server","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fmcp","docs\u002F1.getting-started\u002F7.ai\u002F1.mcp","Use Nuxt UI components in your AI assistants with Model Context Protocol support.",{"title":148,"path":149,"stem":150,"framework":16,"category":16,"description":151,"to":16,"target":16,"icon":152},"LLMs.txt","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fllms-txt","docs\u002F1.getting-started\u002F7.ai\u002F2.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":154,"path":155,"stem":156,"framework":16,"category":16,"description":157,"to":16,"target":16,"icon":158},"Skills","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fskills","docs\u002F1.getting-started\u002F7.ai\u002F3.skills","Install Nuxt UI skills to give AI coding agents deep knowledge of components, theming, and best practices.","i-lucide-sparkles",{"title":160,"path":161,"stem":162,"framework":16,"category":16,"description":163,"to":164,"target":165,"icon":166},"Figma","\u002Fdocs\u002Fgetting-started\u002Ffigma","docs\u002F1.getting-started\u002Ffigma","How to use Nuxt UI in Figma.","https:\u002F\u002Fgo.nuxt.com\u002Ffigma-ui","_blank","i-simple-icons-figma",{"title":67,"framework":16,"category":16,"description":16,"to":16,"target":16,"icon":168,"path":169,"stem":170,"children":171,"page":36},"i-lucide-square-code","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[172,178,184,190,196,201,206,211,216,221,226,232,237,242,247,252,257,262,268,273,278,283,288,293,298,303,308,314,319,324,329,335,340,345,350,355,360,365,370,376,381,386,391,396,402,408,413,418,423,428,433,438,443,448,453,458,463,469,474,479,484,489,494,499,504,509,514,519,524,529,534,539,544,549,554,559,564,569,574,579,584,589,594,600,605,610,615,620,625,630,635,640,645,650,655,660,665,670,675,680,685,690,695,700,705,710,715,720,725,730,736,741,746,751,756,761,766,771,776,781,786,791,796,801,806,811,815,820,825,830,835],{"title":173,"path":174,"stem":175,"framework":16,"category":176,"description":177,"to":16,"target":16},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002Faccordion","data","A stacked set of collapsible panels.",{"title":179,"path":180,"stem":181,"framework":16,"category":182,"description":183,"to":16,"target":16},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002F2.components\u002Falert","element","A callout to draw the user's attention.",{"title":185,"path":186,"stem":187,"framework":16,"category":188,"description":189,"to":16,"target":16},"App","\u002Fdocs\u002Fcomponents\u002Fapp","docs\u002F2.components\u002Fapp","layout","A wrapper to provide global configuration, toasts and tooltips to your app.",{"title":191,"path":192,"stem":193,"framework":16,"category":194,"description":195,"to":16,"target":16},"AuthForm","\u002Fdocs\u002Fcomponents\u002Fauth-form","docs\u002F2.components\u002Fauth-form","page","A customizable Form to create login, register or password reset forms.",{"title":197,"path":198,"stem":199,"framework":16,"category":182,"description":200,"to":16,"target":16},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002Favatar","An img element with fallback and Nuxt Image support.",{"title":202,"path":203,"stem":204,"framework":16,"category":182,"description":205,"to":16,"target":16},"AvatarGroup","\u002Fdocs\u002Fcomponents\u002Favatar-group","docs\u002F2.components\u002Favatar-group","Stack multiple avatars in a group.",{"title":207,"path":208,"stem":209,"framework":16,"category":182,"description":210,"to":16,"target":16},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002Fbadge","A short text to represent a status or a category.",{"title":212,"path":213,"stem":214,"framework":16,"category":182,"description":215,"to":16,"target":16},"Banner","\u002Fdocs\u002Fcomponents\u002Fbanner","docs\u002F2.components\u002Fbanner","Display a banner at the top of your website to inform users about important information.",{"title":217,"path":218,"stem":219,"framework":16,"category":194,"description":220,"to":16,"target":16},"BlogPost","\u002Fdocs\u002Fcomponents\u002Fblog-post","docs\u002F2.components\u002Fblog-post","A customizable article to display in a blog page.",{"title":222,"path":223,"stem":224,"framework":16,"category":194,"description":225,"to":16,"target":16},"BlogPosts","\u002Fdocs\u002Fcomponents\u002Fblog-posts","docs\u002F2.components\u002Fblog-posts","Display a list of blog posts in a responsive grid layout.",{"title":227,"path":228,"stem":229,"framework":16,"category":230,"description":231,"to":16,"target":16},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002F2.components\u002Fbreadcrumb","navigation","A hierarchy of links to navigate through a website.",{"title":233,"path":234,"stem":235,"framework":16,"category":182,"description":236,"to":16,"target":16},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002Fbutton","A button element that can act as a link or trigger an action.",{"title":238,"path":239,"stem":240,"framework":16,"category":182,"description":241,"to":16,"target":16},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002F2.components\u002Fcalendar","A calendar component for selecting single dates, multiple dates or date ranges.",{"title":243,"path":244,"stem":245,"framework":16,"category":182,"description":246,"to":16,"target":16},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002Fcard","Display content in a card with a header, body and footer.",{"title":248,"path":249,"stem":250,"framework":16,"category":176,"description":251,"to":16,"target":16},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002F2.components\u002Fcarousel","A carousel with motion and swipe built using Embla.",{"title":253,"path":254,"stem":255,"framework":16,"category":194,"description":256,"to":16,"target":16},"ChangelogVersion","\u002Fdocs\u002Fcomponents\u002Fchangelog-version","docs\u002F2.components\u002Fchangelog-version","A customizable article to display in a changelog.",{"title":258,"path":259,"stem":260,"framework":16,"category":194,"description":261,"to":16,"target":16},"ChangelogVersions","\u002Fdocs\u002Fcomponents\u002Fchangelog-versions","docs\u002F2.components\u002Fchangelog-versions","Display a list of changelog versions in a timeline.",{"title":263,"path":264,"stem":265,"framework":16,"category":266,"description":267,"to":16,"target":16},"Chat","\u002Fdocs\u002Fcomponents\u002Fchat","docs\u002F2.components\u002Fchat","chat","Build AI chat interfaces with streaming, reasoning, and tool calling.",{"title":269,"path":270,"stem":271,"framework":16,"category":266,"description":272,"to":16,"target":16},"ChatMessage","\u002Fdocs\u002Fcomponents\u002Fchat-message","docs\u002F2.components\u002Fchat-message","Display a chat message with icon, avatar, and actions.",{"title":274,"path":275,"stem":276,"framework":16,"category":266,"description":277,"to":16,"target":16},"ChatMessages","\u002Fdocs\u002Fcomponents\u002Fchat-messages","docs\u002F2.components\u002Fchat-messages","Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.",{"title":279,"path":280,"stem":281,"framework":16,"category":266,"description":282,"to":16,"target":16},"ChatPalette","\u002Fdocs\u002Fcomponents\u002Fchat-palette","docs\u002F2.components\u002Fchat-palette","A chat palette to create a chatbot interface inside an overlay.",{"title":284,"path":285,"stem":286,"framework":16,"category":266,"description":287,"to":16,"target":16},"ChatPrompt","\u002Fdocs\u002Fcomponents\u002Fchat-prompt","docs\u002F2.components\u002Fchat-prompt","An enhanced Textarea for submitting prompts in AI chat interfaces.",{"title":289,"path":290,"stem":291,"framework":16,"category":266,"description":292,"to":16,"target":16},"ChatPromptSubmit","\u002Fdocs\u002Fcomponents\u002Fchat-prompt-submit","docs\u002F2.components\u002Fchat-prompt-submit","A Button for submitting chat prompts with automatic status handling.",{"title":294,"path":295,"stem":296,"framework":16,"category":266,"description":297,"to":16,"target":16},"ChatReasoning","\u002Fdocs\u002Fcomponents\u002Fchat-reasoning","docs\u002F2.components\u002Fchat-reasoning","Display a collapsible AI reasoning or thinking process.",{"title":299,"path":300,"stem":301,"framework":16,"category":266,"description":302,"to":16,"target":16},"ChatShimmer","\u002Fdocs\u002Fcomponents\u002Fchat-shimmer","docs\u002F2.components\u002Fchat-shimmer","Display a text shimmer animation effect.",{"title":304,"path":305,"stem":306,"framework":16,"category":266,"description":307,"to":16,"target":16},"ChatTool","\u002Fdocs\u002Fcomponents\u002Fchat-tool","docs\u002F2.components\u002Fchat-tool","Display a collapsible AI tool invocation status.",{"title":309,"path":310,"stem":311,"framework":16,"category":312,"description":313,"to":16,"target":16},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002Fcheckbox","form","An input element to toggle between checked and unchecked states.",{"title":315,"path":316,"stem":317,"framework":16,"category":312,"description":318,"to":16,"target":16},"CheckboxGroup","\u002Fdocs\u002Fcomponents\u002Fcheckbox-group","docs\u002F2.components\u002Fcheckbox-group","A set of checkboxes to select multiple options from a list.",{"title":320,"path":321,"stem":322,"framework":16,"category":182,"description":323,"to":16,"target":16},"Chip","\u002Fdocs\u002Fcomponents\u002Fchip","docs\u002F2.components\u002Fchip","An indicator of a numeric value or a state.",{"title":325,"path":326,"stem":327,"framework":16,"category":182,"description":328,"to":16,"target":16},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002F2.components\u002Fcollapsible","A collapsible element to toggle visibility of its content.",{"title":330,"path":331,"stem":332,"framework":16,"category":333,"description":334,"to":16,"target":16},"ColorModeAvatar","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-avatar","docs\u002F2.components\u002Fcolor-mode-avatar","color-mode","An Avatar with a different source for light and dark mode.",{"title":336,"path":337,"stem":338,"framework":16,"category":333,"description":339,"to":16,"target":16},"ColorModeButton","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-button","docs\u002F2.components\u002Fcolor-mode-button","A Button to switch between light and dark mode.",{"title":341,"path":342,"stem":343,"framework":16,"category":333,"description":344,"to":16,"target":16},"ColorModeImage","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-image","docs\u002F2.components\u002Fcolor-mode-image","An image element with a different source for light and dark mode.",{"title":346,"path":347,"stem":348,"framework":16,"category":333,"description":349,"to":16,"target":16},"ColorModeSelect","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-select","docs\u002F2.components\u002Fcolor-mode-select","A Select to switch between system, dark and light mode.",{"title":351,"path":352,"stem":353,"framework":16,"category":333,"description":354,"to":16,"target":16},"ColorModeSwitch","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-switch","docs\u002F2.components\u002Fcolor-mode-switch","A Switch to toggle between light and dark mode.",{"title":356,"path":357,"stem":358,"framework":16,"category":312,"description":359,"to":16,"target":16},"ColorPicker","\u002Fdocs\u002Fcomponents\u002Fcolor-picker","docs\u002F2.components\u002Fcolor-picker","A component to select a color.",{"title":361,"path":362,"stem":363,"framework":16,"category":230,"description":364,"to":16,"target":16},"CommandPalette","\u002Fdocs\u002Fcomponents\u002Fcommand-palette","docs\u002F2.components\u002Fcommand-palette","A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.",{"title":366,"path":367,"stem":368,"framework":16,"category":188,"description":369,"to":16,"target":16},"Container","\u002Fdocs\u002Fcomponents\u002Fcontainer","docs\u002F2.components\u002Fcontainer","A layout element to center and constrain the width of your content.",{"title":371,"path":372,"stem":373,"framework":28,"category":374,"description":375,"to":16,"target":16},"ContentNavigation","\u002Fdocs\u002Fcomponents\u002Fcontent-navigation","docs\u002F2.components\u002Fcontent-navigation","content","An accordion-style navigation component for organizing page links.",{"title":377,"path":378,"stem":379,"framework":28,"category":374,"description":380,"to":16,"target":16},"ContentSearch","\u002Fdocs\u002Fcomponents\u002Fcontent-search","docs\u002F2.components\u002Fcontent-search","A ready-to-use CommandPalette to add to your documentation.",{"title":382,"path":383,"stem":384,"framework":28,"category":374,"description":385,"to":16,"target":16},"ContentSearchButton","\u002Fdocs\u002Fcomponents\u002Fcontent-search-button","docs\u002F2.components\u002Fcontent-search-button","A pre-styled Button to open the ContentSearch modal.",{"title":387,"path":388,"stem":389,"framework":28,"category":374,"description":390,"to":16,"target":16},"ContentSurround","\u002Fdocs\u002Fcomponents\u002Fcontent-surround","docs\u002F2.components\u002Fcontent-surround","A pair of prev and next links to navigate between pages.",{"title":392,"path":393,"stem":394,"framework":28,"category":374,"description":395,"to":16,"target":16},"ContentToc","\u002Fdocs\u002Fcomponents\u002Fcontent-toc","docs\u002F2.components\u002Fcontent-toc","A sticky Table of Contents with automatic active anchor link highlighting.",{"title":397,"path":398,"stem":399,"framework":16,"category":400,"description":401,"to":16,"target":16},"ContextMenu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002Fcontext-menu","overlay","A menu to display actions when right-clicking on an element.",{"title":403,"path":404,"stem":405,"framework":16,"category":406,"description":407,"to":16,"target":16},"DashboardGroup","\u002Fdocs\u002Fcomponents\u002Fdashboard-group","docs\u002F2.components\u002Fdashboard-group","dashboard","A fixed layout component that provides context for dashboard components with sidebar state management and persistence.",{"title":409,"path":410,"stem":411,"framework":16,"category":406,"description":412,"to":16,"target":16},"DashboardNavbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-navbar","docs\u002F2.components\u002Fdashboard-navbar","A responsive navbar to display in a dashboard.",{"title":414,"path":415,"stem":416,"framework":16,"category":406,"description":417,"to":16,"target":16},"DashboardPanel","\u002Fdocs\u002Fcomponents\u002Fdashboard-panel","docs\u002F2.components\u002Fdashboard-panel","A resizable panel to display in a dashboard.",{"title":419,"path":420,"stem":421,"framework":16,"category":406,"description":422,"to":16,"target":16},"DashboardResizeHandle","\u002Fdocs\u002Fcomponents\u002Fdashboard-resize-handle","docs\u002F2.components\u002Fdashboard-resize-handle","A handle to resize a sidebar or panel.",{"title":424,"path":425,"stem":426,"framework":16,"category":406,"description":427,"to":16,"target":16},"DashboardSearch","\u002Fdocs\u002Fcomponents\u002Fdashboard-search","docs\u002F2.components\u002Fdashboard-search","A ready-to-use CommandPalette to add to your dashboard.",{"title":429,"path":430,"stem":431,"framework":16,"category":406,"description":432,"to":16,"target":16},"DashboardSearchButton","\u002Fdocs\u002Fcomponents\u002Fdashboard-search-button","docs\u002F2.components\u002Fdashboard-search-button","A pre-styled Button to open the DashboardSearch modal.",{"title":434,"path":435,"stem":436,"framework":16,"category":406,"description":437,"to":16,"target":16},"DashboardSidebar","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar","docs\u002F2.components\u002Fdashboard-sidebar","A resizable and collapsible sidebar to display in a dashboard.",{"title":439,"path":440,"stem":441,"framework":16,"category":406,"description":442,"to":16,"target":16},"DashboardSidebarCollapse","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-collapse","docs\u002F2.components\u002Fdashboard-sidebar-collapse","A Button to collapse the sidebar on desktop.",{"title":444,"path":445,"stem":446,"framework":16,"category":406,"description":447,"to":16,"target":16},"DashboardSidebarToggle","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-toggle","docs\u002F2.components\u002Fdashboard-sidebar-toggle","A Button to toggle the sidebar on mobile.",{"title":449,"path":450,"stem":451,"framework":16,"category":406,"description":452,"to":16,"target":16},"DashboardToolbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-toolbar","docs\u002F2.components\u002Fdashboard-toolbar","A toolbar to display under the navbar in a dashboard.",{"title":454,"path":455,"stem":456,"framework":16,"category":400,"description":457,"to":16,"target":16},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002Fdrawer","A drawer that smoothly slides in and out of the screen.",{"title":459,"path":460,"stem":461,"framework":16,"category":400,"description":462,"to":16,"target":16},"DropdownMenu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002Fdropdown-menu","A menu to display actions when clicking on an element.",{"title":464,"path":465,"stem":466,"framework":16,"category":467,"description":468,"to":16,"target":16},"Editor","\u002Fdocs\u002Fcomponents\u002Feditor","docs\u002F2.components\u002Feditor","editor","A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.",{"title":470,"path":471,"stem":472,"framework":16,"category":467,"description":473,"to":16,"target":16},"EditorDragHandle","\u002Fdocs\u002Fcomponents\u002Feditor-drag-handle","docs\u002F2.components\u002Feditor-drag-handle","A draggable handle for reordering and selecting blocks in the editor.",{"title":475,"path":476,"stem":477,"framework":16,"category":467,"description":478,"to":16,"target":16},"EditorEmojiMenu","\u002Fdocs\u002Fcomponents\u002Feditor-emoji-menu","docs\u002F2.components\u002Feditor-emoji-menu","An emoji picker menu that displays emoji suggestions when typing the : character in the editor.",{"title":480,"path":481,"stem":482,"framework":16,"category":467,"description":483,"to":16,"target":16},"EditorMentionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-mention-menu","docs\u002F2.components\u002Feditor-mention-menu","A mention menu that displays user suggestions when typing a trigger character in the editor.",{"title":485,"path":486,"stem":487,"framework":16,"category":467,"description":488,"to":16,"target":16},"EditorSuggestionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-suggestion-menu","docs\u002F2.components\u002Feditor-suggestion-menu","A command menu that displays formatting and action suggestions when typing the \u002F character in the editor.",{"title":490,"path":491,"stem":492,"framework":16,"category":467,"description":493,"to":16,"target":16},"EditorToolbar","\u002Fdocs\u002Fcomponents\u002Feditor-toolbar","docs\u002F2.components\u002Feditor-toolbar","A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.",{"title":495,"path":496,"stem":497,"framework":16,"category":176,"description":498,"to":16,"target":16},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002F2.components\u002Fempty","A component to display an empty state.",{"title":500,"path":501,"stem":502,"framework":16,"category":188,"description":503,"to":16,"target":16},"Error","\u002Fdocs\u002Fcomponents\u002Ferror","docs\u002F2.components\u002Ferror","A pre-built error component with NuxtError support.",{"title":505,"path":506,"stem":507,"framework":16,"category":182,"description":508,"to":16,"target":16},"FieldGroup","\u002Fdocs\u002Fcomponents\u002Ffield-group","docs\u002F2.components\u002Ffield-group","Group multiple button-like elements together.",{"title":510,"path":511,"stem":512,"framework":16,"category":312,"description":513,"to":16,"target":16},"FileUpload","\u002Fdocs\u002Fcomponents\u002Ffile-upload","docs\u002F2.components\u002Ffile-upload","An input element to upload files.",{"title":515,"path":516,"stem":517,"framework":16,"category":188,"description":518,"to":16,"target":16},"Footer","\u002Fdocs\u002Fcomponents\u002Ffooter","docs\u002F2.components\u002Ffooter","A responsive footer for your site links and legal notices.",{"title":520,"path":521,"stem":522,"framework":16,"category":230,"description":523,"to":16,"target":16},"FooterColumns","\u002Fdocs\u002Fcomponents\u002Ffooter-columns","docs\u002F2.components\u002Ffooter-columns","A list of links as columns to display in your Footer.",{"title":525,"path":526,"stem":527,"framework":16,"category":312,"description":528,"to":16,"target":16},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002F2.components\u002Fform","A form component with built-in validation and submission handling.",{"title":530,"path":531,"stem":532,"framework":16,"category":312,"description":533,"to":16,"target":16},"FormField","\u002Fdocs\u002Fcomponents\u002Fform-field","docs\u002F2.components\u002Fform-field","A wrapper for form elements that provides validation and error handling.",{"title":535,"path":536,"stem":537,"framework":16,"category":188,"description":538,"to":16,"target":16},"Header","\u002Fdocs\u002Fcomponents\u002Fheader","docs\u002F2.components\u002Fheader","A responsive header for your site navigation.",{"title":540,"path":541,"stem":542,"framework":16,"category":182,"description":543,"to":16,"target":16},"Icon","\u002Fdocs\u002Fcomponents\u002Ficon","docs\u002F2.components\u002Ficon","A component to display any icon from Iconify or another component.",{"title":545,"path":546,"stem":547,"framework":16,"category":312,"description":548,"to":16,"target":16},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002Finput","An input element to enter text.",{"title":550,"path":551,"stem":552,"framework":16,"category":312,"description":553,"to":16,"target":16},"InputDate","\u002Fdocs\u002Fcomponents\u002Finput-date","docs\u002F2.components\u002Finput-date","An input component for date selection.",{"title":555,"path":556,"stem":557,"framework":16,"category":312,"description":558,"to":16,"target":16},"InputMenu","\u002Fdocs\u002Fcomponents\u002Finput-menu","docs\u002F2.components\u002Finput-menu","An autocomplete input with real-time suggestions.",{"title":560,"path":561,"stem":562,"framework":16,"category":312,"description":563,"to":16,"target":16},"InputNumber","\u002Fdocs\u002Fcomponents\u002Finput-number","docs\u002F2.components\u002Finput-number","An input for numerical values with a customizable range.",{"title":565,"path":566,"stem":567,"framework":16,"category":312,"description":568,"to":16,"target":16},"InputRating","\u002Fdocs\u002Fcomponents\u002Finput-rating","docs\u002F2.components\u002Finput-rating","A component to display and collect ratings from users.",{"title":570,"path":571,"stem":572,"framework":16,"category":312,"description":573,"to":16,"target":16},"InputTags","\u002Fdocs\u002Fcomponents\u002Finput-tags","docs\u002F2.components\u002Finput-tags","An input element that displays interactive tags.",{"title":575,"path":576,"stem":577,"framework":16,"category":312,"description":578,"to":16,"target":16},"InputTime","\u002Fdocs\u002Fcomponents\u002Finput-time","docs\u002F2.components\u002Finput-time","An input for selecting a time.",{"title":580,"path":581,"stem":582,"framework":16,"category":182,"description":583,"to":16,"target":16},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002F2.components\u002Fkbd","A kbd element to display a keyboard key.",{"title":585,"path":586,"stem":587,"framework":16,"category":230,"description":588,"to":16,"target":16},"Link","\u002Fdocs\u002Fcomponents\u002Flink","docs\u002F2.components\u002Flink","A wrapper around NuxtLink with extra props.",{"title":590,"path":591,"stem":592,"framework":16,"category":312,"description":593,"to":16,"target":16},"Listbox","\u002Fdocs\u002Fcomponents\u002Flistbox","docs\u002F2.components\u002Flistbox","A selectable list of items with search, virtualization and rich item rendering.",{"title":595,"path":596,"stem":597,"framework":16,"category":598,"description":599,"to":16,"target":16},"LocaleSelect","\u002Fdocs\u002Fcomponents\u002Flocale-select","docs\u002F2.components\u002Flocale-select","i18n","A Select to switch between locales.",{"title":601,"path":602,"stem":603,"framework":16,"category":188,"description":604,"to":16,"target":16},"Main","\u002Fdocs\u002Fcomponents\u002Fmain","docs\u002F2.components\u002Fmain","A main element that fills the available viewport height.",{"title":606,"path":607,"stem":608,"framework":16,"category":176,"description":609,"to":16,"target":16},"Marquee","\u002Fdocs\u002Fcomponents\u002Fmarquee","docs\u002F2.components\u002Fmarquee","A component to create infinite scrolling content.",{"title":611,"path":612,"stem":613,"framework":16,"category":400,"description":614,"to":16,"target":16},"Modal","\u002Fdocs\u002Fcomponents\u002Fmodal","docs\u002F2.components\u002Fmodal","A dialog window that can be used to display a message or request user input.",{"title":616,"path":617,"stem":618,"framework":16,"category":230,"description":619,"to":16,"target":16},"NavigationMenu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002F2.components\u002Fnavigation-menu","A list of links that can be displayed horizontally or vertically.",{"title":621,"path":622,"stem":623,"framework":16,"category":194,"description":624,"to":16,"target":16},"Page","\u002Fdocs\u002Fcomponents\u002Fpage","docs\u002F2.components\u002Fpage","A grid layout for your pages with left and right columns.",{"title":626,"path":627,"stem":628,"framework":16,"category":194,"description":629,"to":16,"target":16},"PageAnchors","\u002Fdocs\u002Fcomponents\u002Fpage-anchors","docs\u002F2.components\u002Fpage-anchors","A list of anchors to be displayed in the page.",{"title":631,"path":632,"stem":633,"framework":16,"category":194,"description":634,"to":16,"target":16},"PageAside","\u002Fdocs\u002Fcomponents\u002Fpage-aside","docs\u002F2.components\u002Fpage-aside","A sticky aside to display your page navigation.",{"title":636,"path":637,"stem":638,"framework":16,"category":194,"description":639,"to":16,"target":16},"PageBody","\u002Fdocs\u002Fcomponents\u002Fpage-body","docs\u002F2.components\u002Fpage-body","The main content of your page.",{"title":641,"path":642,"stem":643,"framework":16,"category":194,"description":644,"to":16,"target":16},"PageCard","\u002Fdocs\u002Fcomponents\u002Fpage-card","docs\u002F2.components\u002Fpage-card","A pre-styled card component that displays a title, description and optional link.",{"title":646,"path":647,"stem":648,"framework":16,"category":194,"description":649,"to":16,"target":16},"PageColumns","\u002Fdocs\u002Fcomponents\u002Fpage-columns","docs\u002F2.components\u002Fpage-columns","A responsive multi-column layout system for organizing content side-by-side.",{"title":651,"path":652,"stem":653,"framework":16,"category":194,"description":654,"to":16,"target":16},"PageCTA","\u002Fdocs\u002Fcomponents\u002Fpage-cta","docs\u002F2.components\u002Fpage-cta","A call to action section to display in your pages.",{"title":656,"path":657,"stem":658,"framework":16,"category":194,"description":659,"to":16,"target":16},"PageFeature","\u002Fdocs\u002Fcomponents\u002Fpage-feature","docs\u002F2.components\u002Fpage-feature","A component to showcase key features of your application.",{"title":661,"path":662,"stem":663,"framework":16,"category":194,"description":664,"to":16,"target":16},"PageGrid","\u002Fdocs\u002Fcomponents\u002Fpage-grid","docs\u002F2.components\u002Fpage-grid","A responsive grid system for displaying content in a flexible layout.",{"title":666,"path":667,"stem":668,"framework":16,"category":194,"description":669,"to":16,"target":16},"PageHeader","\u002Fdocs\u002Fcomponents\u002Fpage-header","docs\u002F2.components\u002Fpage-header","A responsive header for your pages.",{"title":671,"path":672,"stem":673,"framework":16,"category":194,"description":674,"to":16,"target":16},"PageHero","\u002Fdocs\u002Fcomponents\u002Fpage-hero","docs\u002F2.components\u002Fpage-hero","A responsive hero for your pages.",{"title":676,"path":677,"stem":678,"framework":16,"category":194,"description":679,"to":16,"target":16},"PageLinks","\u002Fdocs\u002Fcomponents\u002Fpage-links","docs\u002F2.components\u002Fpage-links","A list of links to be displayed in the page.",{"title":681,"path":682,"stem":683,"framework":16,"category":194,"description":684,"to":16,"target":16},"PageList","\u002Fdocs\u002Fcomponents\u002Fpage-list","docs\u002F2.components\u002Fpage-list","A vertical list layout for displaying content in a stacked format.",{"title":686,"path":687,"stem":688,"framework":16,"category":194,"description":689,"to":16,"target":16},"PageLogos","\u002Fdocs\u002Fcomponents\u002Fpage-logos","docs\u002F2.components\u002Fpage-logos","A list of logos or images to display on your pages.",{"title":691,"path":692,"stem":693,"framework":16,"category":194,"description":694,"to":16,"target":16},"PageSection","\u002Fdocs\u002Fcomponents\u002Fpage-section","docs\u002F2.components\u002Fpage-section","A responsive section for your pages.",{"title":696,"path":697,"stem":698,"framework":16,"category":230,"description":699,"to":16,"target":16},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002F2.components\u002Fpagination","A list of buttons or links to navigate through pages.",{"title":701,"path":702,"stem":703,"framework":16,"category":312,"description":704,"to":16,"target":16},"PinInput","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002F2.components\u002Fpin-input","An input element to enter a pin.",{"title":706,"path":707,"stem":708,"framework":16,"category":400,"description":709,"to":16,"target":16},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002Fpopover","A non-modal dialog that floats around a trigger element.",{"title":711,"path":712,"stem":713,"framework":16,"category":194,"description":714,"to":16,"target":16},"PricingPlan","\u002Fdocs\u002Fcomponents\u002Fpricing-plan","docs\u002F2.components\u002Fpricing-plan","A customizable pricing plan to display in a pricing page.",{"title":716,"path":717,"stem":718,"framework":16,"category":194,"description":719,"to":16,"target":16},"PricingPlans","\u002Fdocs\u002Fcomponents\u002Fpricing-plans","docs\u002F2.components\u002Fpricing-plans","Display a list of pricing plans in a responsive grid layout.",{"title":721,"path":722,"stem":723,"framework":16,"category":194,"description":724,"to":16,"target":16},"PricingTable","\u002Fdocs\u002Fcomponents\u002Fpricing-table","docs\u002F2.components\u002Fpricing-table","A responsive pricing table component that displays tiered pricing plans with feature comparisons.",{"title":726,"path":727,"stem":728,"framework":16,"category":182,"description":729,"to":16,"target":16},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002Fprogress","An indicator showing the progress of a task.",{"title":731,"path":732,"stem":733,"framework":16,"category":182,"description":734,"to":16,"target":16,"badge":735},"ProgressGroup","\u002Fdocs\u002Fcomponents\u002Fprogress-group","docs\u002F2.components\u002Fprogress-group","A progress bar split into multiple segments that add up to a total.","New",{"title":737,"path":738,"stem":739,"framework":16,"category":312,"description":740,"to":16,"target":16},"RadioGroup","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002Fradio-group","A set of radio buttons to select a single option from a list.",{"title":742,"path":743,"stem":744,"framework":16,"category":176,"description":745,"to":16,"target":16},"ScrollArea","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002F2.components\u002Fscroll-area","A flexible scroll container with virtualization support.",{"title":747,"path":748,"stem":749,"framework":16,"category":312,"description":750,"to":16,"target":16},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002Fselect","A select element to choose from a list of options.",{"title":752,"path":753,"stem":754,"framework":16,"category":312,"description":755,"to":16,"target":16},"SelectMenu","\u002Fdocs\u002Fcomponents\u002Fselect-menu","docs\u002F2.components\u002Fselect-menu","An advanced searchable select element.",{"title":757,"path":758,"stem":759,"framework":16,"category":182,"description":760,"to":16,"target":16},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002Fseparator","Separates content horizontally or vertically.",{"title":762,"path":763,"stem":764,"framework":16,"category":188,"description":765,"to":16,"target":16},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002Fsidebar","A collapsible sidebar with multiple visual variants.",{"title":767,"path":768,"stem":769,"framework":16,"category":182,"description":770,"to":16,"target":16},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002Fskeleton","A placeholder to show while content is loading.",{"title":772,"path":773,"stem":774,"framework":16,"category":400,"description":775,"to":16,"target":16},"Slideover","\u002Fdocs\u002Fcomponents\u002Fslideover","docs\u002F2.components\u002Fslideover","A dialog that slides in from any side of the screen.",{"title":777,"path":778,"stem":779,"framework":16,"category":312,"description":780,"to":16,"target":16},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002Fslider","An input to select a numeric value within a range.",{"title":782,"path":783,"stem":784,"framework":16,"category":188,"description":785,"to":16,"target":16,"badge":735},"Splitter","\u002Fdocs\u002Fcomponents\u002Fsplitter","docs\u002F2.components\u002Fsplitter","A set of resizable panels separated by draggable handles.",{"title":787,"path":788,"stem":789,"framework":16,"category":230,"description":790,"to":16,"target":16},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002F2.components\u002Fstepper","A set of steps that are used to indicate progress through a multi-step process.",{"title":792,"path":793,"stem":794,"framework":16,"category":312,"description":795,"to":16,"target":16},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002Fswitch","A control that toggles between two states.",{"title":797,"path":798,"stem":799,"framework":16,"category":176,"description":800,"to":16,"target":16},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002F2.components\u002Ftable","A responsive table element to display data in rows and columns.",{"title":802,"path":803,"stem":804,"framework":16,"category":230,"description":805,"to":16,"target":16},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002Ftabs","A set of tab panels that are displayed one at a time.",{"title":807,"path":808,"stem":809,"framework":16,"category":312,"description":810,"to":16,"target":16},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002F2.components\u002Ftextarea","A textarea element to input multi-line text.",{"title":50,"path":812,"stem":813,"framework":16,"category":188,"description":814,"to":16,"target":16},"\u002Fdocs\u002Fcomponents\u002Ftheme","docs\u002F2.components\u002Ftheme","A headless component to theme child components.",{"title":816,"path":817,"stem":818,"framework":16,"category":176,"description":819,"to":16,"target":16},"Timeline","\u002Fdocs\u002Fcomponents\u002Ftimeline","docs\u002F2.components\u002Ftimeline","A component that displays a sequence of events with dates, titles, icons or avatars.",{"title":821,"path":822,"stem":823,"framework":16,"category":400,"description":824,"to":16,"target":16},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002F2.components\u002Ftoast","A succinct message to provide information or feedback to the user.",{"title":826,"path":827,"stem":828,"framework":16,"category":400,"description":829,"to":16,"target":16},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002Ftooltip","A popup that reveals information when hovering over an element.",{"title":831,"path":832,"stem":833,"framework":16,"category":176,"description":834,"to":16,"target":16},"Tree","\u002Fdocs\u002Fcomponents\u002Ftree","docs\u002F2.components\u002Ftree","A tree view component to display and interact with hierarchical data structures.",{"title":836,"path":837,"stem":838,"framework":16,"category":176,"description":839,"to":16,"target":16},"User","\u002Fdocs\u002Fcomponents\u002Fuser","docs\u002F2.components\u002Fuser","Display user information with name, description and avatar.",{"title":841,"framework":16,"category":16,"description":16,"to":16,"target":16,"icon":842,"path":843,"stem":844,"children":845,"page":36},"Composables","i-lucide-square-function","\u002Fdocs\u002Fcomposables","docs\u002F3.composables",[846,851,856,861,866,871,876,881],{"title":847,"path":848,"stem":849,"framework":16,"category":16,"description":850,"to":16,"target":16},"defineLocale","\u002Fdocs\u002Fcomposables\u002Fdefine-locale","docs\u002F3.composables\u002Fdefine-locale","A utility to create a custom locale for your app.",{"title":852,"path":853,"stem":854,"framework":16,"category":16,"description":855,"to":16,"target":16},"defineShortcuts","\u002Fdocs\u002Fcomposables\u002Fdefine-shortcuts","docs\u002F3.composables\u002Fdefine-shortcuts","A composable to define keyboard shortcuts in your app.",{"title":857,"path":858,"stem":859,"framework":16,"category":16,"description":860,"to":16,"target":16},"extendLocale","\u002Fdocs\u002Fcomposables\u002Fextend-locale","docs\u002F3.composables\u002Fextend-locale","A utility to extend an existing locale with custom translations.",{"title":862,"path":863,"stem":864,"framework":16,"category":16,"description":865,"to":16,"target":16},"extractShortcuts","\u002Fdocs\u002Fcomposables\u002Fextract-shortcuts","docs\u002F3.composables\u002Fextract-shortcuts","A utility to extract keyboard shortcuts from menu items.",{"title":867,"path":868,"stem":869,"framework":16,"category":16,"description":870,"to":16,"target":16},"useOverlay","\u002Fdocs\u002Fcomposables\u002Fuse-overlay","docs\u002F3.composables\u002Fuse-overlay","A composable to programmatically control overlays.",{"title":872,"path":873,"stem":874,"framework":16,"category":16,"description":875,"to":16,"target":16},"useScrollShadow","\u002Fdocs\u002Fcomposables\u002Fuse-scroll-shadow","docs\u002F3.composables\u002Fuse-scroll-shadow","A composable to apply scroll shadow effects on any scrollable element.",{"title":877,"path":878,"stem":879,"framework":16,"category":16,"description":880,"to":16,"target":16},"useToast","\u002Fdocs\u002Fcomposables\u002Fuse-toast","docs\u002F3.composables\u002Fuse-toast","A composable to display toast notifications in your app.",{"title":882,"path":883,"stem":884,"framework":16,"category":16,"description":885,"to":16,"target":16},"useTour","\u002Fdocs\u002Fcomposables\u002Fuse-tour","docs\u002F3.composables\u002Fuse-tour","A composable to build guided tours by re-anchoring a single Popover across steps.",{"title":887,"path":888,"stem":889,"children":890,"framework":16,"category":16,"description":16,"to":16,"target":16,"icon":991},"Typography","\u002Fdocs\u002Ftypography","docs\u002F4.typography\u002F1.index",[891,893,898,903,908,913,918,922,927,931,936,941,946,951,956,960,965,969,973,977,982,987],{"title":15,"path":888,"stem":889,"framework":16,"category":16,"description":892,"to":16,"target":16},"Beautiful typography components and utilities to style your content with Nuxt UI.",{"title":894,"path":895,"stem":896,"framework":16,"category":16,"description":897,"to":16,"target":16},"Headers and text","\u002Fdocs\u002Ftypography\u002Fheaders-and-text","docs\u002F4.typography\u002F2.headers-and-text","Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.",{"title":899,"path":900,"stem":901,"framework":16,"category":16,"description":902,"to":16,"target":16},"Lists and tables","\u002Fdocs\u002Ftypography\u002Flists-and-tables","docs\u002F4.typography\u002F3.lists-and-tables","Organize information with styled lists and responsive tables for clear, consistent readability.",{"title":904,"path":905,"stem":906,"framework":16,"category":16,"description":907,"to":16,"target":16},"Images and embeds","\u002Fdocs\u002Ftypography\u002Fimages-and-embeds","docs\u002F4.typography\u002F4.images-and-embeds","Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.",{"title":909,"path":910,"stem":911,"framework":16,"category":16,"description":912,"to":16,"target":16},"Code","\u002Fdocs\u002Ftypography\u002Fcode","docs\u002F4.typography\u002F5.code","Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.",{"title":173,"path":914,"stem":915,"framework":16,"category":916,"description":917,"to":16,"target":16},"\u002Fdocs\u002Ftypography\u002Faccordion","docs\u002F4.typography\u002Faccordion","components","Create expandable content sections for better information organization.",{"title":207,"path":919,"stem":920,"framework":16,"category":916,"description":921,"to":16,"target":16},"\u002Fdocs\u002Ftypography\u002Fbadge","docs\u002F4.typography\u002Fbadge","Display version numbers, status labels, and tags within your content.",{"title":923,"path":924,"stem":925,"framework":16,"category":916,"description":926,"to":16,"target":16},"Callout","\u002Fdocs\u002Ftypography\u002Fcallout","docs\u002F4.typography\u002Fcallout","Highlight important information with eye-catching colored boxes and icons.",{"title":243,"path":928,"stem":929,"framework":16,"category":916,"description":930,"to":16,"target":16},"\u002Fdocs\u002Ftypography\u002Fcard","docs\u002F4.typography\u002Fcard","Create highlighted content blocks with optional links and navigation.",{"title":932,"path":933,"stem":934,"framework":16,"category":916,"description":935,"to":16,"target":16},"CardGroup","\u002Fdocs\u002Ftypography\u002Fcard-group","docs\u002F4.typography\u002Fcard-group","Organize multiple cards in responsive grid layouts for better content presentation.",{"title":937,"path":938,"stem":939,"framework":16,"category":916,"description":940,"to":16,"target":16},"CodeCollapse","\u002Fdocs\u002Ftypography\u002Fcode-collapse","docs\u002F4.typography\u002Fcode-collapse","Make long code blocks collapsible to save space and improve readability.",{"title":942,"path":943,"stem":944,"framework":16,"category":916,"description":945,"to":16,"target":16},"CodeGroup","\u002Fdocs\u002Ftypography\u002Fcode-group","docs\u002F4.typography\u002Fcode-group","Group multiple code examples in tabbed interfaces for easy comparison.",{"title":947,"path":948,"stem":949,"framework":16,"category":916,"description":950,"to":16,"target":16},"CodePreview","\u002Fdocs\u002Ftypography\u002Fcode-preview","docs\u002F4.typography\u002Fcode-preview","Display code examples with a preview and their source for clearer documentation.",{"title":952,"path":953,"stem":954,"framework":16,"category":916,"description":955,"to":16,"target":16},"CodeTree","\u002Fdocs\u002Ftypography\u002Fcode-tree","docs\u002F4.typography\u002Fcode-tree","Visualize file and folder structures with syntax-highlighted code.",{"title":325,"path":957,"stem":958,"framework":16,"category":916,"description":959,"to":16,"target":16},"\u002Fdocs\u002Ftypography\u002Fcollapsible","docs\u002F4.typography\u002Fcollapsible","Toggle content visibility with smooth expand and collapse animations.",{"title":961,"path":962,"stem":963,"framework":16,"category":916,"description":964,"to":16,"target":16},"Field","\u002Fdocs\u002Ftypography\u002Ffield","docs\u002F4.typography\u002Ffield","Document API parameters, props, and configuration options clearly.",{"title":505,"path":966,"stem":967,"framework":16,"category":916,"description":968,"to":16,"target":16},"\u002Fdocs\u002Ftypography\u002Ffield-group","docs\u002F4.typography\u002Ffield-group","Group related fields together for comprehensive API documentation.",{"title":540,"path":970,"stem":971,"framework":16,"category":916,"description":972,"to":16,"target":16},"\u002Fdocs\u002Ftypography\u002Ficon","docs\u002F4.typography\u002Ficon","Display icons from popular icon libraries to enhance your content.",{"title":580,"path":974,"stem":975,"framework":16,"category":916,"description":976,"to":16,"target":16},"\u002Fdocs\u002Ftypography\u002Fkbd","docs\u002F4.typography\u002Fkbd","Display keyboard shortcuts and key combinations with proper styling.",{"title":978,"path":979,"stem":980,"framework":16,"category":916,"description":981,"to":16,"target":16},"Prompt","\u002Fdocs\u002Ftypography\u002Fprompt","docs\u002F4.typography\u002Fprompt","Display pre-built AI prompts with one-click copy and IDE integration.",{"title":983,"path":984,"stem":985,"framework":16,"category":916,"description":986,"to":16,"target":16},"Steps","\u002Fdocs\u002Ftypography\u002Fsteps","docs\u002F4.typography\u002Fsteps","Transform headings into numbered step-by-step guides and tutorials.",{"title":802,"path":988,"stem":989,"framework":16,"category":916,"description":990,"to":16,"target":16},"\u002Fdocs\u002Ftypography\u002Ftabs","docs\u002F4.typography\u002Ftabs","Organize related content in interactive tabbed interfaces.","i-lucide-square-pilcrow",{"title":993,"path":994,"stem":995,"children":996,"framework":16,"category":16,"description":16,"to":16,"target":16,"icon":999},"Releases","\u002Fdocs\u002Freleases","docs\u002F5.releases\u002F1.index",[997],{"title":993,"path":994,"stem":995,"framework":16,"category":16,"description":998,"to":16,"target":16},"Stay up to date with the newest features, enhancements, and fixes for Nuxt UI.","i-lucide-rocket",{"stats":1001},{"version":1002,"downloads":1003,"stars":1004,"watchers":1004,"forks":1005,"defaultBranch":1006,"publishedAt":1007,"createdAt":1008},"4.11.1",2026254,6933,1120,"v4",1789647556869,1639059438669,{"id":1010,"title":782,"body":1011,"category":188,"description":785,"extension":1541,"framework":16,"index":36,"keywords":16,"links":1542,"meta":1550,"navigation":1551,"path":783,"seo":1552,"sitemap":1553,"stem":784,"target":16,"to":16,"__hash__":1554},"docs\u002Fdocs\u002F2.components\u002Fsplitter.md",{"type":1012,"value":1013,"toc":1522},"minimark",[1014,1019,1023,1028,1034,1039,1046,1213,1232,1247,1266,1270,1279,1294,1298,1302,1335,1338,1342,1348,1351,1355,1365,1368,1372,1383,1480,1484,1488,1491,1495,1498,1502,1505,1508,1511,1515,1518],[1015,1016,1018],"h2",{"id":1017},"usage","Usage",[1020,1021,1022],"p",{},"Use the Splitter component to display a list of resizable panels separated by draggable handles.",[1024,1025],"component-example",{":collapse":1026,"name":1027},"true","splitter-example",[1029,1030,1031],"note",{},[1020,1032,1033],{},"The Splitter fills the height of its container, so make sure a parent element defines one.",[1035,1036,1038],"h3",{"id":1037},"items","Items",[1020,1040,1041,1042,1045],{},"Use the ",[1043,1044,1037],"code",{}," prop as an array of objects with the following properties:",[1047,1048,1049,1069,1080,1091,1103,1114,1143,1154,1166,1177,1189],"ul",{},[1050,1051,1052],"li",{},[1043,1053,1057,1062,1066],{"className":1054,"language":1055,"style":1056},"language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts-type","",[1058,1059,1061],"span",{"class":1060},"sBMFI","defaultSize",[1058,1063,1065],{"class":1064},"sMK4o","?:",[1058,1067,1068],{"class":1060}," number",[1050,1070,1071],{},[1043,1072,1073,1076,1078],{"className":1054,"language":1055,"style":1056},[1058,1074,1075],{"class":1060},"minSize",[1058,1077,1065],{"class":1064},[1058,1079,1068],{"class":1060},[1050,1081,1082],{},[1043,1083,1084,1087,1089],{"className":1054,"language":1055,"style":1056},[1058,1085,1086],{"class":1060},"maxSize",[1058,1088,1065],{"class":1064},[1058,1090,1068],{"class":1060},[1050,1092,1093],{},[1043,1094,1095,1098,1100],{"className":1054,"language":1055,"style":1056},[1058,1096,1097],{"class":1060},"collapsible",[1058,1099,1065],{"class":1064},[1058,1101,1102],{"class":1060}," boolean",[1050,1104,1105],{},[1043,1106,1107,1110,1112],{"className":1054,"language":1055,"style":1056},[1058,1108,1109],{"class":1060},"collapsedSize",[1058,1111,1065],{"class":1064},[1058,1113,1068],{"class":1060},[1050,1115,1116],{},[1043,1117,1118,1121,1123,1126,1130,1133,1136,1138,1141],{"className":1054,"language":1055,"style":1056},[1058,1119,1120],{"class":1060},"sizeUnit",[1058,1122,1065],{"class":1064},[1058,1124,1125],{"class":1064}," '",[1058,1127,1129],{"class":1128},"sfazB","%",[1058,1131,1132],{"class":1064},"'",[1058,1134,1135],{"class":1064}," |",[1058,1137,1125],{"class":1064},[1058,1139,1140],{"class":1128},"px",[1058,1142,1132],{"class":1064},[1050,1144,1145],{},[1043,1146,1147,1150,1152],{"className":1054,"language":1055,"style":1056},[1058,1148,1149],{"class":1060},"order",[1058,1151,1065],{"class":1064},[1058,1153,1068],{"class":1060},[1050,1155,1156],{},[1043,1157,1158,1161,1163],{"className":1054,"language":1055,"style":1056},[1058,1159,1160],{"class":1060},"id",[1058,1162,1065],{"class":1064},[1058,1164,1165],{"class":1060}," string",[1050,1167,1168],{},[1043,1169,1170,1173,1175],{"className":1054,"language":1055,"style":1056},[1058,1171,1172],{"class":1060},"slot",[1058,1174,1065],{"class":1064},[1058,1176,1165],{"class":1060},[1050,1178,1179],{},[1043,1180,1181,1184,1186],{"className":1054,"language":1055,"style":1056},[1058,1182,1183],{"class":1060},"class",[1058,1185,1065],{"class":1064},[1058,1187,1188],{"class":1060}," any",[1050,1190,1191],{},[1043,1192,1193,1196,1198,1201,1205,1207,1210],{"className":1054,"language":1055,"style":1056},[1058,1194,1195],{"class":1060},"ui",[1058,1197,1065],{"class":1064},[1058,1199,1200],{"class":1064}," {",[1058,1202,1204],{"class":1203},"swJcz"," panel",[1058,1206,1065],{"class":1064},[1058,1208,1209],{"class":1060}," ClassNameValue",[1058,1211,1212],{"class":1064}," }",[1020,1214,1041,1215,1217,1218,1220,1221,1223,1224,1227,1228,1231],{},[1043,1216,1172],{}," key to fill the content of a panel and the ",[1043,1219,1183],{}," key to style it. Items without a ",[1043,1222,1172],{}," key fall back to a ",[1043,1225,1226],{},"panel-{index}"," slot. Sizes are percentages by default, set ",[1043,1229,1230],{},"sizeUnit: 'px'"," on an item for pixel values.",[1233,1234,1235],"caution",{},[1020,1236,1237,1238,1240,1241,1243,1244,1246],{},"When rendering on the server, set the ",[1043,1239,1160],{}," prop and give ",[1043,1242,1061],{}," to all items or to none. Ids are generated automatically otherwise and the server and the client can disagree, which breaks the layout on hydration. An item without a ",[1043,1245,1061],{}," falls back to an equal share on the server, so mixing the two makes panels jump once hydrated. Pixel sizes are measured on the client and always shift a little.",[1248,1249,1257,1262],"component-code",{":collapse":1026,":external":1250,":externalTypes":1251,":ignore":1252,":prettier":1026,":props":1253,":slots":1254,"className":1255},"[\"items\"]","[\"SplitterItem[]\"]","[\"items\",\"id\"]","{\"id\":\"splitter-items\",\"items\":[{\"slot\":\"sidebar\",\"minSize\":15,\"maxSize\":40,\"defaultSize\":25,\"class\":\"bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium\"},{\"slot\":\"main\",\"defaultSize\":75,\"class\":\"bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium\"}]}","{\"sidebar\":\"Sidebar\",\"main\":\"Main\"}",[1256],"h-96",[1258,1259,1260],"template",{"v-slot:sidebar":1056},[1020,1261,762],{},[1258,1263,1264],{"v-slot:main":1056},[1020,1265,601],{},[1035,1267,1269],{"id":1268},"orientation","Orientation",[1020,1271,1041,1272,1274,1275,1278],{},[1043,1273,1268],{}," prop to change the direction of the splitter. Defaults to ",[1043,1276,1277],{},"horizontal",".",[1248,1280,1284,1289],{":collapse":1026,":external":1250,":externalTypes":1251,":ignore":1252,":prettier":1026,":props":1281,":slots":1282,"className":1283},"{\"id\":\"splitter-orientation\",\"orientation\":\"vertical\",\"items\":[{\"slot\":\"first\",\"class\":\"bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium\"},{\"slot\":\"second\",\"class\":\"bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium\"}]}","{\"first\":\"First\",\"second\":\"Second\"}",[1256],[1258,1285,1286],{"v-slot:first":1056},[1020,1287,1288],{},"First",[1258,1290,1291],{"v-slot:second":1056},[1020,1292,1293],{},"Second",[1015,1295,1297],{"id":1296},"examples","Examples",[1035,1299,1301],{"id":1300},"with-collapsible-panel","With collapsible panel",[1020,1303,1304,1305,1308,1309,1311,1312,1314,1315,1318,1319,1322,1323,1326,1327,1318,1329,1322,1331,1334],{},"Set ",[1043,1306,1307],{},"collapsible: true"," on an item to let it collapse past its ",[1043,1310,1075],{},", and use ",[1043,1313,1109],{}," to keep part of the panel visible when collapsed. The panel slot exposes ",[1043,1316,1317],{},"collapsed",", ",[1043,1320,1321],{},"collapse"," and ",[1043,1324,1325],{},"expand"," so you can control it programmatically, and the ",[1043,1328,1321],{},[1043,1330,1325],{},[1043,1332,1333],{},"resize"," events fire with the panel index.",[1024,1336],{":collapse":1026,"name":1337},"splitter-collapsible-example",[1035,1339,1341],{"id":1340},"with-nested-splitters","With nested splitters",[1020,1343,1344,1345,1347],{},"Nest a ",[1043,1346,782],{}," inside a panel to build two-dimensional, IDE-style layouts.",[1024,1349],{":collapse":1026,"name":1350},"splitter-nested-example",[1035,1352,1354],{"id":1353},"with-custom-handle","With custom handle",[1020,1356,1357,1358,1360,1361,1364],{},"The handle is invisible by default. Use the ",[1043,1359,1195],{}," prop to restyle it, for example as a visible divider for flush layouts, and the ",[1043,1362,1363],{},"resize-handle"," slot to render content inside it like a grip.",[1024,1366],{":collapse":1026,"name":1367},"splitter-custom-handle-example",[1035,1369,1371],{"id":1370},"with-persistence","With persistence",[1020,1373,1374,1375,1378,1379,1382],{},"Provide an ",[1043,1376,1377],{},"auto-save-id"," to persist the layout to ",[1043,1380,1381],{},"localStorage"," and restore it on reload.",[1384,1385,1388],"pre",{"className":1386,"code":1387,"language":34,"meta":1056,"style":1056},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUSplitter id=\"my-layout\" auto-save-id=\"my-layout\" :items=\"items\">\n    \u003C!-- ... -->\n  \u003C\u002FUSplitter>\n\u003C\u002Ftemplate>\n",[1043,1389,1390,1402,1453,1460,1470],{"__ignoreMap":1056},[1058,1391,1394,1397,1399],{"class":1392,"line":1393},"line",1,[1058,1395,1396],{"class":1064},"\u003C",[1058,1398,1258],{"class":1203},[1058,1400,1401],{"class":1064},">\n",[1058,1403,1405,1408,1411,1415,1418,1421,1424,1426,1429,1431,1433,1435,1437,1440,1442,1444,1446,1449,1451],{"class":1392,"line":1404},2,[1058,1406,1407],{"class":1064},"  \u003C",[1058,1409,1410],{"class":1203},"USplitter",[1058,1412,1414],{"class":1413},"spNyl"," id",[1058,1416,1417],{"class":1064},"=",[1058,1419,1420],{"class":1064},"\"",[1058,1422,1423],{"class":1128},"my-layout",[1058,1425,1420],{"class":1064},[1058,1427,1428],{"class":1413}," auto-save-id",[1058,1430,1417],{"class":1064},[1058,1432,1420],{"class":1064},[1058,1434,1423],{"class":1128},[1058,1436,1420],{"class":1064},[1058,1438,1439],{"class":1064}," :",[1058,1441,1037],{"class":1413},[1058,1443,1417],{"class":1064},[1058,1445,1420],{"class":1064},[1058,1447,1037],{"class":1448},"sTEyZ",[1058,1450,1420],{"class":1064},[1058,1452,1401],{"class":1064},[1058,1454,1456],{"class":1392,"line":1455},3,[1058,1457,1459],{"class":1458},"sHwdD","    \u003C!-- ... -->\n",[1058,1461,1463,1466,1468],{"class":1392,"line":1462},4,[1058,1464,1465],{"class":1064},"  \u003C\u002F",[1058,1467,1410],{"class":1203},[1058,1469,1401],{"class":1064},[1058,1471,1473,1476,1478],{"class":1392,"line":1472},5,[1058,1474,1475],{"class":1064},"\u003C\u002F",[1058,1477,1258],{"class":1203},[1058,1479,1401],{"class":1064},[1015,1481,1483],{"id":1482},"api","API",[1035,1485,1487],{"id":1486},"props","Props",[1489,1490],"component-props",{},[1035,1492,1494],{"id":1493},"slots","Slots",[1496,1497],"component-slots",{},[1035,1499,1501],{"id":1500},"emits","Emits",[1503,1504],"component-emits",{},[1015,1506,50],{"id":1507},"theme",[1509,1510],"component-theme",{},[1015,1512,1514],{"id":1513},"changelog","Changelog",[1516,1517],"component-changelog",{},[1519,1520,1521],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":1056,"searchDepth":1404,"depth":1404,"links":1523},[1524,1528,1534,1539,1540],{"id":1017,"depth":1404,"text":1018,"children":1525},[1526,1527],{"id":1037,"depth":1455,"text":1038},{"id":1268,"depth":1455,"text":1269},{"id":1296,"depth":1404,"text":1297,"children":1529},[1530,1531,1532,1533],{"id":1300,"depth":1455,"text":1301},{"id":1340,"depth":1455,"text":1341},{"id":1353,"depth":1455,"text":1354},{"id":1370,"depth":1455,"text":1371},{"id":1482,"depth":1404,"text":1483,"children":1535},[1536,1537,1538],{"id":1486,"depth":1455,"text":1487},{"id":1493,"depth":1455,"text":1494},{"id":1500,"depth":1455,"text":1501},{"id":1507,"depth":1404,"text":50},{"id":1513,"depth":1404,"text":1514},"md",[1543,1546],{"label":782,"icon":1544,"to":1545},"i-custom-reka-ui","https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fsplitter",{"label":1547,"icon":1548,"to":1549},"GitHub","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fui\u002Fblob\u002Fv4\u002Fsrc\u002Fruntime\u002Fcomponents\u002FSplitter.vue",{},{"badge":735},{"description":785},{"loc":783},"84eBpwA6VtQ9w-yUYELVHT8F7lqHgKS-RkBxSJ1sYvk",{"code":1556,"filePath":1557,"pascalName":1558},"\u003Cscript setup lang=\"ts\">\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst card = 'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n\nconst items: SplitterItem[] = [\n  { slot: 'left', minSize: 15, defaultSize: 25, class: card },\n  { slot: 'main', minSize: 30, defaultSize: 50, class: card },\n  { slot: 'right', minSize: 15, defaultSize: 25, class: card }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"w-full h-96\">\n    \u003CUSplitter id=\"splitter-example\" :items=\"items\">\n      \u003Ctemplate #left>\n        Left\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #main>\n        Main\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #right>\n        Right\n      \u003C\u002Ftemplate>\n    \u003C\u002FUSplitter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","\u002Fvercel\u002Fpath0\u002Fdocs\u002Fapp\u002Fcomponents\u002Fcontent\u002Fexamples\u002Fsplitter\u002FSplitterExample.vue","SplitterExample","::code-collapse\n```vue \n\u003Cscript setup lang=\"ts\">\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst card = 'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n\nconst items: SplitterItem[] = [\n  { slot: 'left', minSize: 15, defaultSize: 25, class: card },\n  { slot: 'main', minSize: 30, defaultSize: 50, class: card },\n  { slot: 'right', minSize: 15, defaultSize: 25, class: card }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"w-full h-96\">\n    \u003CUSplitter id=\"splitter-example\" :items=\"items\">\n      \u003Ctemplate #left>\n        Left\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #main>\n        Main\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #right>\n        Right\n      \u003C\u002Ftemplate>\n    \u003C\u002FUSplitter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n```\n::",{"mode":1561,"prefetch":36,"preload":36,"filePath":1562,"declarationPath":1563,"pascalName":1410,"kebabName":1564,"chunkName":1565,"priority":1566,"_scanned":21,"meta":1567},"all","..\u002Fsrc\u002Fruntime\u002Fcomponents\u002FSplitter.vue","\u002Fvercel\u002Fpath0\u002Fsrc\u002Fruntime\u002Fcomponents\u002FSplitter.vue","u-splitter","components\u002Fu-splitter",0,{"type":1404,"props":1568,"slots":1687,"events":1691,"exposed":1712,"hash":1713},[1569,1577,1587,1598,1609,1618,1625,1634,1643,1670],{"name":1570,"global":36,"description":1571,"tags":1572,"required":36,"type":1576,"schema":1576,"default":1575},"as","The element or component this component should render as.",[1573],{"name":1574,"text":1575},"defaultValue","'div'","any",{"name":1160,"global":36,"description":1578,"tags":1579,"required":36,"type":1580,"schema":1581},"A unique id for the group, also used to derive the ids of its panels and handles.\nSet it when rendering on the server, auto-generated ids can differ between the server and the client and break resizing on hydration.",[],"undefined | string",{"kind":1582,"type":1583,"schema":1584},"enum","string | undefined",{"0":1585,"1":1586},"undefined","string",{"name":1268,"global":36,"default":1588,"description":1589,"tags":1590,"required":36,"type":1592,"schema":1593},"'horizontal'","The orientation of the splitter.",[1591],{"name":1574,"text":1588},"undefined | \"horizontal\" | \"vertical\"",{"kind":1582,"type":1594,"schema":1595},"\"horizontal\" | \"vertical\" | undefined",{"0":1585,"1":1596,"2":1597},"\"horizontal\"","\"vertical\"",{"name":1037,"global":36,"description":1056,"tags":1599,"required":36,"type":1600,"schema":1601},[],"undefined | T[]",{"kind":1582,"type":1602,"schema":1603},"T[] | undefined",{"0":1585,"1":1604},{"kind":1605,"type":1606,"schema":1607},"array","T[]",[1608],"T",{"name":1610,"global":36,"description":1611,"tags":1612,"required":36,"type":1615,"schema":1616,"default":1614},"disabled","Whether the resize handles are disabled, locking the current layout.",[1613],{"name":1574,"text":1614},"false","boolean | undefined",{"kind":1582,"type":1615,"schema":1617},{"0":1585,"1":1614,"2":1026},{"name":1195,"global":36,"description":1056,"tags":1619,"required":36,"type":1620,"schema":1621},[],"undefined | { root?: SlotClass; panel?: SlotClass; handle?: SlotClass; }",{"kind":1582,"type":1622,"schema":1623},"{ root?: SlotClass; panel?: SlotClass; handle?: SlotClass; } | undefined",{"0":1585,"1":1624},"{ root?: SlotClass; panel?: SlotClass; handle?: SlotClass; }",{"name":1626,"global":36,"description":1627,"tags":1628,"required":36,"type":1629,"schema":1630},"autoSaveId","Unique id used to auto-save group arrangement via `localStorage`.",[],"undefined | null | string",{"kind":1582,"type":1631,"schema":1632},"string | null | undefined",{"0":1585,"1":1633,"2":1586},"null",{"name":1635,"global":36,"description":1636,"tags":1637,"required":36,"type":1638,"schema":1639},"keyboardResizeBy","Step size when arrow key was pressed.",[],"undefined | null | number",{"kind":1582,"type":1640,"schema":1641},"number | null | undefined",{"0":1585,"1":1633,"2":1642},"number",{"name":1644,"global":36,"description":1645,"tags":1646,"required":36,"type":1647,"schema":1648},"storage","Custom storage API; defaults to localStorage",[],"undefined | PanelGroupStorage",{"kind":1582,"type":1649,"schema":1650},"PanelGroupStorage | undefined",{"0":1585,"1":1651},{"kind":1652,"type":1653,"schema":1654},"object","PanelGroupStorage",{"getItem":1655,"setItem":1663},{"name":1656,"global":36,"description":1056,"tags":1657,"required":21,"type":1658,"schema":1659},"getItem",[],"(name: string) => string | null",{"kind":1660,"type":1661,"schema":1662},"event","(name: string): string | null",{},{"name":1664,"global":36,"description":1056,"tags":1665,"required":21,"type":1666,"schema":1667},"setItem",[],"(name: string, value: string) => void",{"kind":1660,"type":1668,"schema":1669},"(name: string, value: string): void",{},{"name":1671,"global":36,"description":1672,"tags":1673,"required":36,"type":1674,"schema":1675},"hitAreaMargins","Allow this much margin when determining resizable handle hit detection",[],"undefined | PointerHitAreaMargins",{"kind":1582,"type":1676,"schema":1677},"PointerHitAreaMargins | undefined",{"0":1585,"1":1678},{"kind":1652,"type":1679,"schema":1680},"PointerHitAreaMargins",{"coarse":1681,"fine":1684},{"name":1682,"global":36,"description":1056,"tags":1683,"required":21,"type":1642,"schema":1642},"coarse",[],{"name":1685,"global":36,"description":1056,"tags":1686,"required":21,"type":1642,"schema":1642},"fine",[],[1688],{"name":1363,"type":1689,"description":1056,"tags":1690},"{ index: number; ui: object; }",[],[1692,1696,1700,1703,1707],{"name":188,"description":1056,"tags":1693,"type":1694,"signature":1695},[],"[val: number[]]","(evt: \"layout\", val: number[]): void",{"name":1321,"description":1056,"tags":1697,"type":1698,"signature":1699},[],"[index: number]","(evt: \"collapse\", index: number): void",{"name":1325,"description":1056,"tags":1701,"type":1698,"signature":1702},[],"(evt: \"expand\", index: number): void",{"name":1333,"description":1056,"tags":1704,"type":1705,"signature":1706},[],"[index: number, size: number, prevSize?: number | undefined]","(evt: \"resize\", index: number, size: number, prevSize?: number | undefined): void",{"name":1708,"description":1056,"tags":1709,"type":1710,"signature":1711},"dragging",[],"[index: number, dragging: boolean]","(evt: \"dragging\", index: number, dragging: boolean): void",[],"LcPPAbPPK_teV3kIAg2HRkUiGu5XZj802oef_uCRgv8","::code-collapse{class=\"nuxt-only\"}\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst items = ref\u003CSplitterItem[]>([\n  {\n    slot: 'sidebar',\n    minSize: 15,\n    maxSize: 40,\n    defaultSize: 25,\n    class:\n      'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n  },\n  {\n    slot: 'main',\n    defaultSize: 75,\n    class:\n      'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n  }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUSplitter id=\"splitter-items\" :items=\"items\">\n    \u003Ctemplate #sidebar> Sidebar \u003C\u002Ftemplate>\n\n    \u003Ctemplate #main> Main \u003C\u002Ftemplate>\n  \u003C\u002FUSplitter>\n\u003C\u002Ftemplate>\n```\n\n::\n\n::code-collapse{class=\"vue-only\"}\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst items = ref\u003CSplitterItem[]>([\n  {\n    slot: 'sidebar',\n    minSize: 15,\n    maxSize: 40,\n    defaultSize: 25,\n    class:\n      'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n  },\n  {\n    slot: 'main',\n    defaultSize: 75,\n    class:\n      'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n  }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUSplitter id=\"splitter-items\" :items=\"items\">\n    \u003Ctemplate #sidebar> Sidebar \u003C\u002Ftemplate>\n\n    \u003Ctemplate #main> Main \u003C\u002Ftemplate>\n  \u003C\u002FUSplitter>\n\u003C\u002Ftemplate>\n```\n\n::\n","::code-collapse{class=\"nuxt-only\"}\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst items = ref\u003CSplitterItem[]>([\n  {\n    slot: 'first',\n    class:\n      'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n  },\n  {\n    slot: 'second',\n    class:\n      'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n  }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUSplitter id=\"splitter-orientation\" orientation=\"vertical\" :items=\"items\">\n    \u003Ctemplate #first> First \u003C\u002Ftemplate>\n\n    \u003Ctemplate #second> Second \u003C\u002Ftemplate>\n  \u003C\u002FUSplitter>\n\u003C\u002Ftemplate>\n```\n\n::\n\n::code-collapse{class=\"vue-only\"}\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst items = ref\u003CSplitterItem[]>([\n  {\n    slot: 'first',\n    class:\n      'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n  },\n  {\n    slot: 'second',\n    class:\n      'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n  }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUSplitter id=\"splitter-orientation\" orientation=\"vertical\" :items=\"items\">\n    \u003Ctemplate #first> First \u003C\u002Ftemplate>\n\n    \u003Ctemplate #second> Second \u003C\u002Ftemplate>\n  \u003C\u002FUSplitter>\n\u003C\u002Ftemplate>\n```\n\n::\n",{"code":1717,"filePath":1718,"pascalName":1719},"\u003Cscript setup lang=\"ts\">\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst items: SplitterItem[] = [\n  { slot: 'sidebar', sizeUnit: 'px', minSize: 150, defaultSize: 250, collapsible: true, collapsedSize: 48, class: 'bg-elevated\u002F50 border border-default rounded-xl' },\n  { slot: 'main', class: 'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium' }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"w-full h-96\">\n    \u003CUSplitter id=\"splitter-collapsible-example\" :items=\"items\">\n      \u003Ctemplate #sidebar=\"{ collapsed, collapse, expand }\">\n        \u003Cdiv class=\"flex-1 flex items-center justify-center p-2\">\n          \u003CUButton\n            :icon=\"collapsed ? 'i-lucide-panel-left-open' : 'i-lucide-panel-left-close'\"\n            :label=\"collapsed ? undefined : 'Collapse'\"\n            :aria-label=\"collapsed ? 'Expand' : undefined\"\n            color=\"neutral\"\n            variant=\"subtle\"\n            @click=\"collapsed ? expand() : collapse()\"\n          \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #main>\n        Main\n      \u003C\u002Ftemplate>\n    \u003C\u002FUSplitter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","\u002Fvercel\u002Fpath0\u002Fdocs\u002Fapp\u002Fcomponents\u002Fcontent\u002Fexamples\u002Fsplitter\u002FSplitterCollapsibleExample.vue","SplitterCollapsibleExample","::code-collapse\n```vue \n\u003Cscript setup lang=\"ts\">\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst items: SplitterItem[] = [\n  { slot: 'sidebar', sizeUnit: 'px', minSize: 150, defaultSize: 250, collapsible: true, collapsedSize: 48, class: 'bg-elevated\u002F50 border border-default rounded-xl' },\n  { slot: 'main', class: 'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium' }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"w-full h-96\">\n    \u003CUSplitter id=\"splitter-collapsible-example\" :items=\"items\">\n      \u003Ctemplate #sidebar=\"{ collapsed, collapse, expand }\">\n        \u003Cdiv class=\"flex-1 flex items-center justify-center p-2\">\n          \u003CUButton\n            :icon=\"collapsed ? 'i-lucide-panel-left-open' : 'i-lucide-panel-left-close'\"\n            :label=\"collapsed ? undefined : 'Collapse'\"\n            :aria-label=\"collapsed ? 'Expand' : undefined\"\n            color=\"neutral\"\n            variant=\"subtle\"\n            @click=\"collapsed ? expand() : collapse()\"\n          \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #main>\n        Main\n      \u003C\u002Ftemplate>\n    \u003C\u002FUSplitter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n```\n::",{"code":1722,"filePath":1723,"pascalName":1724},"\u003Cscript setup lang=\"ts\">\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst card = 'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n\nconst items: SplitterItem[] = [\n  { slot: 'left', minSize: 20, class: card },\n  { slot: 'right', minSize: 20 }\n]\n\nconst nested: SplitterItem[] = [\n  { slot: 'top', minSize: 20, class: card },\n  { slot: 'bottom', minSize: 20, class: card }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"w-full h-96\">\n    \u003CUSplitter id=\"splitter-nested-example\" :items=\"items\">\n      \u003Ctemplate #left>\n        Left\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #right>\n        \u003CUSplitter id=\"splitter-nested-example-inner\" orientation=\"vertical\" :items=\"nested\">\n          \u003Ctemplate #top>\n            Top\n          \u003C\u002Ftemplate>\n\n          \u003Ctemplate #bottom>\n            Bottom\n          \u003C\u002Ftemplate>\n        \u003C\u002FUSplitter>\n      \u003C\u002Ftemplate>\n    \u003C\u002FUSplitter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","\u002Fvercel\u002Fpath0\u002Fdocs\u002Fapp\u002Fcomponents\u002Fcontent\u002Fexamples\u002Fsplitter\u002FSplitterNestedExample.vue","SplitterNestedExample","::code-collapse\n```vue \n\u003Cscript setup lang=\"ts\">\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst card = 'bg-elevated\u002F50 border border-default rounded-xl items-center justify-center text-muted font-medium'\n\nconst items: SplitterItem[] = [\n  { slot: 'left', minSize: 20, class: card },\n  { slot: 'right', minSize: 20 }\n]\n\nconst nested: SplitterItem[] = [\n  { slot: 'top', minSize: 20, class: card },\n  { slot: 'bottom', minSize: 20, class: card }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"w-full h-96\">\n    \u003CUSplitter id=\"splitter-nested-example\" :items=\"items\">\n      \u003Ctemplate #left>\n        Left\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #right>\n        \u003CUSplitter id=\"splitter-nested-example-inner\" orientation=\"vertical\" :items=\"nested\">\n          \u003Ctemplate #top>\n            Top\n          \u003C\u002Ftemplate>\n\n          \u003Ctemplate #bottom>\n            Bottom\n          \u003C\u002Ftemplate>\n        \u003C\u002FUSplitter>\n      \u003C\u002Ftemplate>\n    \u003C\u002FUSplitter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n```\n::",{"code":1727,"filePath":1728,"pascalName":1729},"\u003Cscript setup lang=\"ts\">\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst items: SplitterItem[] = [\n  { slot: 'left', minSize: 20, defaultSize: 30, class: 'items-center justify-center text-muted font-medium' },\n  { slot: 'right', defaultSize: 70, class: 'items-center justify-center text-muted font-medium' }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"w-full h-96\">\n    \u003CUSplitter id=\"splitter-custom-handle-example\" :items=\"items\" :ui=\"{ handle: 'data-[orientation=horizontal]:w-px data-[orientation=vertical]:h-px bg-border transition-colors data-[state=hover]:bg-primary data-[state=drag]:bg-primary' }\" class=\"rounded-lg border border-default overflow-hidden\">\n      \u003Ctemplate #left>\n        Left\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #right>\n        Right\n      \u003C\u002Ftemplate>\n    \u003C\u002FUSplitter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","\u002Fvercel\u002Fpath0\u002Fdocs\u002Fapp\u002Fcomponents\u002Fcontent\u002Fexamples\u002Fsplitter\u002FSplitterCustomHandleExample.vue","SplitterCustomHandleExample","::code-collapse\n```vue \n\u003Cscript setup lang=\"ts\">\nimport type { SplitterItem } from '@nuxt\u002Fui'\n\nconst items: SplitterItem[] = [\n  { slot: 'left', minSize: 20, defaultSize: 30, class: 'items-center justify-center text-muted font-medium' },\n  { slot: 'right', defaultSize: 70, class: 'items-center justify-center text-muted font-medium' }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"w-full h-96\">\n    \u003CUSplitter id=\"splitter-custom-handle-example\" :items=\"items\" :ui=\"{ handle: 'data-[orientation=horizontal]:w-px data-[orientation=vertical]:h-px bg-border transition-colors data-[state=hover]:bg-primary data-[state=drag]:bg-primary' }\" class=\"rounded-lg border border-default overflow-hidden\">\n      \u003Ctemplate #left>\n        Left\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #right>\n        Right\n      \u003C\u002Ftemplate>\n    \u003C\u002FUSplitter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n```\n::",1789908637938]