Nuxt UI Skilld

nuxt/ui @nuxt/ui

Version: 4.5.1 (Mar 2026) Deps: @floating-ui/dom@^1.7.5, @iconify/vue@^5.0.0, @internationalized/date@^3.11.0, @internationalized/number@^3.6.5, @nuxt/fonts@^0.14.0, @nuxt/icon@^2.2.1, @nuxt/kit@^4.3.1, @nuxt/schema@^4.3.1, @nuxtjs/color-mode@^3.5.2, @standard-schema/spec@^1.1.0, @tailwindcss/postcss@^4.2.1, @tailwindcss/vite@^4.2.1, @tanstack/vue-table@^8.21.3, @tanstack/vue-virtual@^3.13.19, @tiptap/core@^3.20.0, @tiptap/extension-bubble-menu@^3.20.0, @tiptap/extension-code@^3.20.0, @tiptap/extension-collaboration@^3.20.0, @tiptap/extension-drag-handle@^3.20.0, @tiptap/extension-drag-handle-vue-3@^3.20.0, @tiptap/extension-floating-menu@^3.20.0, @tiptap/extension-horizontal-rule@^3.20.0, @tiptap/extension-image@^3.20.0, @tiptap/extension-mention@^3.20.0, @tiptap/extension-node-range@^3.20.0, @tiptap/extension-placeholder@^3.20.0, @tiptap/markdown@^3.20.0, @tiptap/pm@^3.20.0, @tiptap/starter-kit@^3.20.0, @tiptap/suggestion@^3.20.0, @tiptap/vue-3@^3.20.0, @unhead/vue@^2.1.10, @vueuse/core@^14.2.1, @vueuse/integrations@^14.2.1, @vueuse/shared@^14.2.1, colortranslator@^5.0.0, consola@^3.4.2, defu@^6.1.4, embla-carousel-auto-height@^8.6.0, embla-carousel-auto-scroll@^8.6.0, embla-carousel-autoplay@^8.6.0, embla-carousel-class-names@^8.6.0, embla-carousel-fade@^8.6.0, embla-carousel-vue@^8.6.0, embla-carousel-wheel-gestures@^8.1.0, fuse.js@^7.1.0, hookable@^5.5.3, knitwork@^1.3.0, magic-string@^0.30.21, mlly@^1.8.0, motion-v@^1.10.3, ohash@^2.0.11, pathe@^2.0.3, reka-ui@2.8.2, scule@^1.3.0, tailwind-merge@^3.5.0, tailwind-variants@^3.2.2, tailwindcss@^4.2.1, tinyglobby@^0.2.15, ufo@^1.6.3, unplugin@^3.0.0, unplugin-auto-import@^21.0.0, unplugin-vue-components@^31.0.0, vaul-vue@0.4.1, vue-component-type-helpers@^3.2.5 Tags: alpha: 4.0.0-alpha.2 (Sep 2025), beta: 4.0.0-beta.0 (Sep 2025), false: 3.3.7 (Oct 2025), latest: 4.5.1 (Mar 2026)

References: package.json — exports, entry points • README — setup, basic usage • Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • Releases — changelog, breaking changes, new APIs

Search

Use skilld search instead of grepping .skilld/ directories — hybrid semantic + keyword search across all indexed docs, issues, and releases. If skilld is unavailable, use npx -y skilld search.

skilld search "query" -p @nuxt/ui
skilld search "issues:error handling" -p @nuxt/ui
skilld search "releases:deprecated" -p @nuxt/ui

Filters: docs:, issues:, releases: prefix narrows by source type.

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases.

Breaking Changes

• BREAKING: Theme component — new in v4.5.0, use to override child component themes instead of individual ui props source

• BREAKING: Exposed refs now return HTML elements directly instead of component instances — v4.2.0 change affects InputMenu, InputNumber, InputTags, Select, SelectMenu. Use inputMenu.value.inputRef instead of inputMenu.value.inputRef.$el source

• BREAKING: CommandPalette — trailing-icon prop now for input only, use new children-icon prop for child items source

• BREAKING: Table @select event — arguments reordered to (event, row) instead of (row, event) source

• BREAKING: Composables import path — no longer need .js extension, use import { useToast } from '@nuxt/ui/composables' instead of '@nuxt/ui/composables/useToast.js' source

• BREAKING: Vite plugin theme template path — update tsconfig.node.json alias from ./node_modules/@nuxt/ui/.nuxt/ui to ./node_modules/.nuxt-ui/ui source

New Components

• NEW: Theme component — provide component UI overrides to entire child tree via inject/provide, nested theming supported source

• NEW: Editor component — TipTap-based rich text editor with JSON/HTML/Markdown support, supports extensions source

• NEW: EditorToolbar component — customizable toolbar with formatting actions and link editing source

• NEW: EditorSuggestionMenu component — command menu (/) for inserting blocks source

• NEW: EditorMentionMenu component — mention menu (@) for referencing entities source

• NEW: EditorEmojiMenu component — emoji picker (:) for inline emoji insertion source

• NEW: EditorDragHandle component — drag handle to reorder blocks with dropdown menu source

• NEW: ScrollArea component — flexible scroll container with built-in TanStack Virtual virtualization source

• NEW: InputDate component — date input component using CalendarDate model source

• NEW: InputTime component — time input component using Time model source

• NEW: Empty component — display empty states when no content to show source

New Features & Props

• NEW: virtualize prop — enable virtualization for large datasets on CommandPalette, InputMenu, SelectMenu, Table, Tree source

• NEW: Neutral colors — taupe, mauve, mist, olive now available, configure via ui.neutral in app.config.ts source

• NEW: Toaster duplicate prevention — automatically prevents duplicate toasts with pulse animation source

Also changed: CommandPalette input prop · CommandPalette size prop · Calendar weekNumbers prop · Calendar variant prop · by prop for Select/SelectMenu/InputMenu · valueKey prop for components · clear prop for InputMenu/SelectMenu · Editor placeholder.mode prop · Editor taskList handler · Editor size prop in menus · Timeline select event · FormField orientation prop · InputMenu/Select/SelectMenu modelModifiers prop · Modal scrollable prop · FileUpload preview prop · theme.prefix option · experimental.componentDetection option · defineShortcuts layoutIndependent option

Best Practices

• Wrap your app with UApp to enable global configuration, toast/tooltip providers, and programmatic modal/slideover support — this is required for useOverlay and useToast to work source

• Use the ui prop to override component slots instead of repeating class props — it respects Tailwind Variants merging and compound variants, ensuring consistent precedence source

• Use the Theme component to apply consistent styling across groups of child components — enables scoped theme overrides without modifying each component individually and nesting is supported with innermost taking precedence source

• Define semantic colors in @theme CSS with the --color-* syntax rather than runtime config — makes themes portable and performant source

• Use Form with Standard Schema (Valibot, Zod, Regle, Yup, Joi, Superstruct) for validation — pair with FormField and validation automatically propagates based on field name with dot notation support for nested objects source

• Use nested Form components to validate complex form structures — nested forms inherit parent state and validating the parent automatically validates all children source

• Use useOverlay with overlay.create() and shared composable pattern for programmatic modal/slideover management — enables awaiting overlay.open() to return user input via close event emission source

• Use defineShortcuts with layoutIndependent: true option for keyboard support across different keyboard layouts (Arabic, Hebrew) — defaults to character-based matching but physical key matching works consistently regardless of layout source

• Use Table component with useVueTable composable for type-safe data rendering — built on TanStack Table with flexible columns, data, meta props and h() function for custom cell rendering source

• Configure semantic color aliases (primary, secondary, success, info, warning, error, neutral) in app.config.ts under ui.colors — ensures consistency and enables theme switching without component changes source