The Theme component lets you override the theme of all child components without modifying each one individually. Pass an object to the ui prop where keys are component names and values are their slot class overrides:
The Theme component doesn't render any HTML element. It uses Vue's provide / inject under the hood, so overrides propagate through the entire component tree regardless of nesting depth. Theme components can be nested (innermost wins) and the ui prop on individual components always takes priority.
Thanks to Tailwind CSS v4.2, four new neutral color options are now available: taupe, mauve, mist and olive. Configure them through the ui.neutral option in your app.config.ts.
We're introducing a suite of 6 new components to build rich text editors, powered by TipTap:
Editor: The root component supporting JSON, HTML, and Markdown content types.
EditorToolbar: A customizable toolbar with formatting actions, link editing, and extensible item groups.
EditorSuggestionMenu: A command menu (/) to insert headings, lists, code blocks, images, and more.
EditorMentionMenu: A mention menu (@) to reference users or other entities.
EditorEmojiMenu: An emoji picker (:) to insert emojis inline.
EditorDragHandle: A drag handle to reorder blocks with a dropdown menu for block actions.
The Editor is fully extensible through TipTap's extension system and exposes the editor instance for advanced use cases.
We've also released a new Editor template that showcases all the Editor components in a production-ready setup with real-time collaboration via PartyKit and AI autocompletion using AI SDK and Vercel AI Gateway.
You can now use Tailwind CSS's prefix option (#5341) to prefix all utilities generated by Nuxt UI and avoid conflicts with your own styles or other libraries.
Exposed refs now consistently return the HTML element directly instead of the component instance. This affects InputMenu, InputNumber, InputTags, Select, and SelectMenu.
<script setup lang="ts">
const inputMenu = useTemplateRef('inputMenu')
- inputMenu.value.inputRef.$el // Component instance
+ inputMenu.value.inputRef // HTML element directly
</script>
module: properly export composables from module (cb25902)
There was an issue with how composables were exported, you no longer need the .js extension:
<script setup lang="ts">
- import { useToast } from '@nuxt/ui/composables/useToast.js'
+ import { useToast } from '@nuxt/ui/composables/useToast'
// or
+ import { useToast } from '@nuxt/ui/composables'
</script>
The Vite plugin now properly generates theme files as real files instead of incorrectly shipping them inside .nuxt/ on NPM. This ensures the #build/ui.css import and custom theme configuration work correctly.
When using the Vite plugin, update your tsconfig.node.json alias:
Enable the new experimental.componentDetection option in your nuxt.config.ts to automatically detect which components are actually used and only generate the necessary CSS for those components including their dependencies (#5222).
We apologize for these small breaking changes. With 110+ components in the library, we occasionally need to make corrections to maintain consistency and quality. We aim to minimize breaking changes, but sometimes they're necessary to improve the developer experience in the long run.
CommandPalette: add children-icon prop to use trailing-icon in input (#4397) (edda8a6)
The trailing-icon prop is now used for the Input, and a new children-icon prop has been added to customize the icon for child items:
We are excited to announce Nuxt UI v4, a major milestone that unifies Nuxt UI and Nuxt UI Pro into a single, fully open-source library. Following NuxtLabs joining Vercel in July, we're now able to offer 100+ production-ready components and a complete Figma Kit available for free to everyone.
The migration from v3 to v4 is designed to be smoother than previous major version transitions.
We recommend reading the migration guide for step-by-step instructions.
For Nuxt UI users
Update to @nuxt/ui@latest
For Nuxt UI Pro users
Replace @nuxt/ui-pro with @nuxt/ui in your dependencies
Update module registration from @nuxt/ui-pro to @nuxt/ui in your Nuxt config
Change configuration key from uiPro to ui in your app config
Update CSS imports from @nuxt/ui-pro to @nuxt/ui
Update any import statements to reference @nuxt/ui
We want to extend a special thanks to everyone who supported Nuxt UI Pro. Your early adoption and feedback were instrumental in shaping Nuxt UI. You helped us fund, maintain, and improve the project, allowing us to reach this milestone where we can now offer these powerful tools to the entire community.
A huge thanks to the dedicated team behind Nuxt UI and our incredible community of 250+ contributors. Your hard work, creativity, and passion have been the driving force behind this project's success.
We've enhanced the utility class system to make it more intuitive and easier to use. While CSS variables provided flexibility, writing classes like text-(--ui-text-muted) proved cumbersome. We've introduced three major improvements:
Default Color Shades (#3916): New utility classes for default color shades that automatically map to our design system variables. These shades automatically adapt to your color scheme and can be configured for both light and dark modes: https://ui.nuxt.com/getting-started/theme#colors
Neutral Color Utilities (#3629): New utility classes for text, background, border, ring, divide and outline colors that map to our design system variables. These utilities work with opacity modifiers and automatically adapt to your color mode: https://ui.nuxt.com/getting-started/theme#neutral
Dynamic Border Radius Utilities (#3906): Override default Tailwind CSS rounded-* utilities to use our --ui-radius CSS variable, making it easier to maintain consistent border radius across your application: https://ui.nuxt.com/getting-started/theme#radius
These changes are fully backward compatible - existing CSS variable-based classes will continue to work while providing a more ergonomic alternative for new code.
The module has been updated to use nuxt/module-builder@1.0.0, bringing improved build performance and better TypeScript support.
Following this change, we've refactored how component types are handled which brings full HMR support with app.config.ts changes, this was only working when reloading the page previously.
OverlayProvider: return an overlay instance from .open() (#3829) (f3098df)
This PR changes .open() to return an overlay instance with a result promise property instead of returning the promise directly, providing more flexibility:
Form: drop explicit support for zod and valibot (#3618)
We now rely on standard-schema for Form validation with valibot and zod. Make sure to upgrade to valibot@1.0.0 / zod@3.24.0 if you use them in your app.