Nuxt UI 4.11 Makes App Layouts More Practical
Nuxt UI 4.11.0 adds Splitter, ProgressGroup, Vue component detection, reduced-motion improvements, and small performance fixes that matter for real Nuxt and Vue applications.
Nuxt UI 4.11.0 shipped on August 21, 2026, and it is not the kind of release that looks dramatic from the outside. There is no framework rewrite, no new rendering model, and no claim that developers can delete half their codebase. The interesting part is smaller and more useful: the release fills in interface primitives that application teams keep rebuilding by hand.1
The headline addition is Splitter, a new component for layouts with resizable panels. It supports draggable handles, minimum and maximum sizes, collapsible panels, nesting, and vertical orientation.1 That sounds ordinary until you look at the kind of applications Nuxt is increasingly used for: dashboards, admin systems, editors, AI workbenches, internal tools, analytics surfaces, documentation consoles, and developer platforms.
Those products often need a left navigation area, a main workspace, a detail inspector, a preview panel, or a log stream. A fixed grid is rarely enough. Users expect to resize the parts of the interface that matter to their work. Until a component library owns that pattern, every team ends up making a slightly different version with slightly different keyboard behavior, persistence, sizing rules, and hydration edge cases.
Nuxt UI's release notes call out two implementation details that matter for production Nuxt apps: developers should set an id when rendering Splitter on the server so generated IDs match during hydration, and they can use auto-save-id to persist a layout to localStorage.1 That is the kind of boring guidance that prevents real bugs.
The second new component is ProgressGroup. It displays several values as segments in one progress bar, with a legend and support for theme colors or raw CSS colors.1 This is a compact pattern for storage usage, quota dashboards, task mixes, budget allocation, build-step progress, or any other interface where a single total is less useful than a composition.
The release also improves motion. Nuxt UI says animations and movement transitions now use the --ease-out token, including exits, and that prefers-reduced-motion now covers overlays and stops movement transitions such as the Tabs indicator.1 That is worth noting because polished UI libraries often treat motion as decoration. In actual products, motion is part of accessibility and perceived quality. A library-level token gives teams one place to tune timing. Better reduced-motion handling means less manual patching around overlays and navigation components.
For pure Vue and Vite users, v4.11.0 brings experimental.componentDetection to the @nuxt/ui/vite plugin.1 The feature scans source files and generates theme CSS only for the components in use, matching behavior already available through the Nuxt module.1 The notes also mention an escape hatch: pass an explicit array of component names for dynamic <component :is> cases that static detection cannot see.1
That matters because Nuxt UI is no longer only a Nuxt convenience layer. It is also a Vue UI library powered by Tailwind CSS. Component detection is a practical step toward keeping CSS output aligned with actual usage, especially for teams that want the component system without shipping unnecessary theme surface.
The release includes smaller performance work too: Button, Select, SelectMenu, and InputMenu narrow reactive dependencies, and component slot invocations are memoized for simple arguments.1 These are not headline features, but they are the kind of maintenance that decides whether a component library still feels responsive after it becomes the default choice across a product.
There are also regular fixes and localization updates, including CLDR validation in CLI and tests, Austrian language support, theme fixes around app config class merging, and logical padding for Tree indentation.1
The broader signal is simple: Nuxt UI is maturing toward application infrastructure, not just page-level components. Splitter gives teams a native way to build resizable workspaces. ProgressGroup covers dense operational metrics. Component detection reduces CSS waste outside Nuxt. Motion and reduced-motion changes make interaction feel more deliberate.
For teams already on Nuxt 4, Vue, Tailwind CSS, and Cloudflare-style deployment pipelines, this is exactly the kind of release that is easy to underestimate. It does not change the architecture. It removes a few pieces of interface plumbing that teams should not have to own themselves.