✨ Highlights

📦 New Empty Component

A new Empty component is now available to display empty states when there's no content to show (#5200).

⚡️ Component Virtualization

Use the virtualize prop to enable virtualization for large datasets on CommandPalette, InputMenu, SelectMenu, Table and Tree components (#5162).

<template>
  <UTable :data="data" :columns="columns" virtualize />
</template>

🎯 Experimental Component Detection

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).

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    experimental: {
      componentDetection: true
    }
  }
})

🚨 Breaking Changes

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:

<template>
- <UCommandPalette :trailing-icon="i-lucide-arrow-right" />
+ <UCommandPalette :children-icon="i-lucide-arrow-right" />
</template>

• Table: consistent args order in select event (9526a1b)

The @select event now passes arguments in a consistent order: (event, row) instead of (row, event):

<template>
- <UTable @select="(row, e) => {}" />
+ <UTable @select="(e, row) => {}" />
</template>

🚀 Features

• Calendar: add variant prop (#5138) (bb4f42c)
• CommandPalette: add children-icon prop to use trailing-icon in input (#4397) (edda8a6)
• CommandPalette: preserve group order in search results (#5197) (38647a2)
• components: expose ui in slot props where used (#5207) (63c0a5f)
• components: handle description in items (#5193) (70cf05f)
• components: implement virtualization (#5162) (c744d6f)
• Empty: new component (#5200) (6a6de8d)
• InputNumber: handle increment / decrement as booleans (#4805) (1858908)
• module: add experimental.componentDetection option (#5222) (f80474c)
• Popover: add close method in slots (#5176) (53c6508)
• ProseImg: improve zoom transition (#4998) (d502c30)
• Tree: add global event handlers and checkbox example (#5195) (84f87a5)
• Tree: expose $el for drag and drop example (#5239) (fcf6117)
• Tree: provide additional slot props (#5194) (c8b01c9)
• useToast: handle max global configuration (#5068) (e4c6113)

🐛 Bug Fixes

• BlogPost/ChangelogVersion: allow any attrs inimage prop (9632f99), closes #5276
• Breadcrumb: handle active in items (cc8cbf3), closes #4771
• ChatMessage: ensure left side takes full width (af8c023)
• ChatMessage: only apply max-width on right side (a85b0e1)
• ChatMessage: reset top and bottom margin (8f9176c)
• ChatMessages: allow user scroll with should-auto-scroll (#5252) (db73765)
• ChatMessages: define user & assistant ui prop type (#5234) (240bc1a)
• CodeTree/Tree: restore item wrapper with presentation role (70aaf4a), closes #4945
• components: add missing ui prop in prose proxy components (#5205) (d1afe90)
• ContextMenu/DropdownMenu: allow item content class override (ab5032d), closes #5277
• Drawer/Modal/Slideover: remove close autofocus prevent (#5191) (8099440)
• Error/Main: render as div instead of main (2a09ac0), closes #4955
• FileUpload: handle disabling file delete button (08c30cf), closes #5249
• FileUpload: stuck focus while tabbing (#5128) (2477d44)
• FileUpload: use native img element for blob URLs preview (69906bc), closes #5121 #4824
• InputMenu/SelectMenu: enrich reusable template item prop (63074d6)
• InputMenu: ensure tag can be removed when number (028538a)
• Kbd: return original value and use uppercase class (#5238) (4095c9a)
• NavigationMenu: display trailing slot when badge not undefined (f24204f), closes #4670
• Table: consistent args order in select event (9526a1b)
• Table: expose $el instead of rootRef (c019f8f), closes #5230 #5162

🌐 Locales

• locale: add Croatian language (#5293) ([b84d67b](b84d67b...

🐛 Bug Fixes

• FileUpload: handle disabling file delete button (8e506c4), closes #5249
• FileUpload: stuck focus while tabbing (#5128) (1752f21)
• NavigationMenu: display trailing slot when badge not undefined (ee9e02a), closes #4670

Full Changelog: v3.3.6...v3.3.7

🐛 Bug Fixes

• App: allow global portal disabling (#5111) (43c119f)
• Carousel: ensure plugins init after client-side navigation (#5117) (0f7a1b7)
• Carousel: invert arrow keys in RTL direction (#5072) (27cb2b6)
• Drawer: prevent unwanted close when dismissible is false (#5085) (027c06a)
• Drawer: use full height/width for snapPoints (#5041) (8f21339)
• Pagination: make ellipsis non-interactive (#5081) (ab168af)
• Table: empty cell value causing hydration errors (#5069) (cd2662a)
• useKbd: update escape key from ⎋ to Esc (#5076) (27aa80c)

Full Changelog: v3.3.5...v3.3.6

🐛 Bug Fixes

• App: allow global portal disabling (#5111) (7659fa1)
• AuthForm: export type with proper inference for field-specific props (#5106) (344f269)
• Avatar: remove redundant img role (066b8a1), closes #5044
• Carousel: ensure plugins init after client-side navigation (#5117) (21fbe63)
• Carousel: invert arrow keys in RTL direction (#5072) (fde53ee)
• ChatMessages: ensure content is render before scrolling (0db622a)
• ChatMessages: watch deep to handle streaming with parts (ff67fa3)
• components: add missing data-orientation for consistency (a9fe7c6)
• ContentNavigation: improve path matching and recursion with default-open (22ee075), closes #5112
• ContentSearch/DashboardSearch: proxy modal props to support fullscreen (095a0c1)
• DashboardPanel/DashboardSidebar: handle RTL mode (#5109) (fface35)
• Drawer: prevent unwanted close when dismissible is false (#5085) (2abdc21)
• Drawer: use full height/width for snapPoints (#5041) (b145768)
• locale: improve ckb translations (#5079) (3ee3a5e)
• locale: improve typography with ellipsis (#5052) (391f9f5)
• Pagination: make ellipsis non-interactive (#5081) (62f64cc)
• Table: empty cell value causing hydration errors (#5069) (44a38ea)
• unplugin: handle components resolution with subpath (31db8d9)
• useKbd: update escape key from ⎋ to Esc (#5076) (64d1589)
• vue: align useCookie stub with nuxt's default value handling (#5089) (f531807)

👋 New Contributors

• @theoriginalstove made their first contribution in #5053
• @drevantonder made their first contribution in #5063
• @paulbarre made their first contribution in #5072
• @swarakaka made their first contribution in #5079
• @devzom made their first contribution in #5085
• @kendalled made their first contribution in #5122

Full Changelog: v4.0.0...v4.0.1

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.

Read the blog post announcement: https://nuxt.com/blog/nuxt-ui-v4

Get started with Nuxt UI v4 →

✨ Highlights

🌐 Unified and Open Source

Nuxt UI v4 marks a significant milestone by merging Nuxt UI and Nuxt UI Pro into one cohesive, fully open-source library:

• 100+ components: Complete access to all components, including those previously exclusive to Pro
• Figma Kit: Professional design resources now available to everyone
• Single package: Everything unified under @nuxt/ui

🖥️ Templates

All our previously exclusive templates for Nuxt and Vue are now available to everyone and updated to Nuxt UI v4:

• Starter: A minimal template to get started with Nuxt UI
• Landing: A modern landing page template powered by Nuxt Content
• Docs: A documentation template powered by Nuxt Content
• SaaS: A SaaS template with landing, pricing, docs and blog powered by Nuxt Content
• Dashboard: A dashboard template with multi-column layout for building sophisticated admin interfaces
• Chat: An AI chatbot template to build your own chatbot powered by Nuxt MDC and Vercel AI SDK
• Portfolio: A sleek portfolio template to showcase your work, skills and blog powered by Nuxt Content
• Changelog: A changelog template to display your repository releases notes from GitHub powered by Nuxt MDC

📚 Documentation

We've made extensive improvements to the documentation in v4 to provide a better developer experience:

• Unified location: All documentation now lives under /docs/ with automatic redirects from legacy paths
• Dedicated sections: Theme and Typography now have their own organized sections
• AI-ready features: LLMs.txt endpoints and MCP Server integration for AI tools like Cursor, Windsurf, and GitHub Copilot

🌱 Migration from v3

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

1. Update to @nuxt/ui@latest

For Nuxt UI Pro users

1. Replace @nuxt/ui-pro with @nuxt/ui in your dependencies
2. Update module registration from @nuxt/ui-pro to @nuxt/ui in your Nuxt config
3. Change configuration key from uiPro to ui in your app config
4. Update CSS imports from @nuxt/ui-pro to @nuxt/ui
5. Update any import statements to reference @nuxt/ui

🙏 Acknowledgements

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.

Thank you for being part of this journey 💚

🐛 Bug Fixes

• InputMenu: ensure to pass a string to items when multiple (0031a75), closes #5018
• InputTags: add blur and focus event handlers on input (#5007) (5db2708)
• Progress: improve status-position when 0 (#4994) (e0891ea)
• Tabs: use nullish coalescing on item value (a4ab796), closes #4804
• types: allow arbitrary keys in tv config (#4992) (8d859ea)
• types: resolve ambient declaration error in icons type (#4991) (526cb81)

New Contributors

• @ronannnn made their first contribution in #4795

Full Changelog: v3.3.4...v3.3.5

🐛 Bug Fixes

• ChatMessages: wrap indicator with slot (#5036) (c00bf30)
• CheckboxGroup: proxy generic to emits (ffa5b23)
• Form: improve nested form validation handling (#5024) (77a554e)
• Form: remove joi and yup in favor of @standard-schema/spec (#5035) (723cf36)
• InputMenu: ensure to pass a string to items when multiple (9beccbb), closes #5018
• InputTags: add blur and focus event handlers on input (#5007) (3fd2614)
• locale: improve translations in pt locale (#5003) (725ef9b)
• module: only inject tailwindcss vite plugin once (#5008) (c2e39dd)
• ProseImg: add w-full by default (#4997) (de47add)
• Tabs: use nullish coalescing on item value (340fc48), closes #4804
• Tree: remove value-key in favor of get-key (#4999) (240ff42)
• types: allow arbitrary keys in tv config (#4992) (ae77b69)

New Contributors

• @jd-solanki made their first contribution in #4872
• @JoniDS made their first contribution in #5003

Full Changelog: v4.0.0-alpha.2...v4.0.0-beta.0

This 4.0.0-alpha.2 release focused mostly on stability and documentation.

The official v4 release should come next week after some more testing.

📚 Documentation

We've made significant improvements to the documentation in this release.

• Theme: rewritten and split into three sections - Design system, CSS variables and Component theming (#4939)
• Typography: moved to own section with headers, text formatting, lists, tables, images, embeds, and code blocks (#4742)
• MCP server: Model Context Protocol integration with tools, prompts and resources for AI assistants (#4878)

🚨 Breaking Changes

• Form: don't mutate the form's state if transformations are enabled (#4902)

Read the migration guide about this change: https://ui4.nuxt.com/docs/getting-started/migration/v4#changes-to-form-component

🚀 Features

• ContentNavigation: handle collapsible false with type multiple (c42c2ab)

🐛 Bug Fixes

• Banner: ensure actions slot renders (#4946) (5d6e1fc)
• CodeTree/Tree: improve accessibility (#4945) (117b4b3)
• components: dot notation type support for labelKey and valueKey (#4933) (11a0320)
• components: proxySlots reactivity (#4969) (3173bee)
• components: standardize naming for type interfaces (#4990) (788d2de)
• FileUpload: add missing button type (f33e43c), closes #4935
• Form: don't mutate the form's state if transformations are enabled (#4902) (99dbe81)
• Form: handling race condition on clear function (#4843) (2269b48)
• InputMenu/Select/SelectMenu: show falsy value when model value is falsy (#4882) (073dd14)
• locale: improve id name (#4890) (1b5d741)
• Marquee: handle RTL mode (#4887) (1846079)
• Progress: improve status-position when 0 (#4994) (0e1e44c)
• types: export missing tv types (#4971) (2bf273c)
• types: resolve ambient declaration error in icons type (#4991) (6ddf899)

🔥 Performances

• module: do not block setup by importing plugin (#4923) (695d9f7)

🌐 Locales

• locale: add Georgian language (#4973) (996478f)
• locale: add Swiss German language (#4962) (dcf17bb)

👋 New Contributors

• @reinacchi made their first contribution in #4890
• @USLTD made their first contribution in #4973
• @vitpetricak made their first contribution in #4991

Full Changelog: v4.0.0-alpha.1...v4.0.0-alpha.2

🐛 Bug Fixes

• FileUpload: add missing button type (91f86d9), closes #4935
• Form: handling race condition on clear function (#4843) (0a8ead7)
• InputMenu/Select/SelectMenu: show falsy value when model value is falsy (#4882) (5b9d9d8)
• locale: improve id name (#4890) (e5cb55b)

Full Changelog: v3.3.3...v3.3.4

📚 Documentation

You can check out the new docs for v4 on https://ui4.nuxt.com while in alpha.

🚨 Breaking Changes

• components: rename nullify modifier to nullable and add optional (#4838)
• module: update compatibility to nuxt 4

Read the migration guide to v4.

🚀 Features

• Icon: allow passing a component instead of a name (#4766) (61b603f)

🐛 Bug Fixes

• AuthForm: use error from form field (#4738) (00dfb6b)
• BlogPost: ensure date slot renders (#4743) (4514880)
• ChangelogVersion/ChangelogVersions: handle RTL mode (#4777) (f91c408)
• ContentSearch/DashboardSearch: make ui.modal work (946c2ec)
• module: add @source on components (a16465f), closes #4773
• PageCard: improve keyboard accessibility (#4733) (3029568)
• ProseImg: ensure unique motion layout id for images (#4720) (9480a0b)
• unplugin: handle components overrides in subdirectories (#4781) (69ee75e)

New Contributors

• @cco3 made their first contribution in #4808
• @fabianmerino made their first contribution in #4826

Full Changelog: v4.0.0-alpha.0...v4.0.0-alpha.1