Releases

Stay up to date with the newest features, enhancements, and fixes for Nuxt UI.
Star on GitHub

v4.3.0

✨ Highlights

:pencil: New Editor components

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.

https://github.com/user-attachments/assets/e4a799a3-8de1-4c85-b7f0-ca24789a6d98

📜 New ScrollArea component

The ScrollArea component provides a flexible scroll container with built-in virtualization support through TanStack Virtual.

https://github.com/user-attachments/assets/8d3bcb2c-f5b4-4412-99b1-f33e1b53dd8e

🚀 Features

🐛 Bug Fixes

  • BlogPost/ChangelogVersion/PageFeature/User: allow tab focus (47d93d3), closes #5635
  • Carousel: consistent stopOnInteraction behavior (#5489) (36a7861)
  • Carousel: improve dots focus styles (cc90fb8)
  • ColorModeButton: improve icon class merging (2ce9af2)
  • ContentSearch/DasboardSearch: set full height on mobile to prevent jump (70317e5)
  • DashboardResizeHandle: allow hover over panel with z-index (07147f1)
  • FormField: hide error if error prop is false (#5599) (6b7fe25)
  • InputDate/InputTime: add missing field group variant (#5596) (cb3cec2)
  • PageCard/PageCTA/PageSection: handle reverse prop under lg screens (#5545) (60b430c)
  • ProseA/ProseCallout/ProseCard: improve focus styles (df5f8c2)
  • Slider: add aria-label to thumb (#5313) (f99ec46)
  • Table: only forward necessary props (#5527) (b0b209e)
  • Table: properly position pinned columns based on size (e885b0e), closes #4721 #3927

🌐 Locales

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v4.2.1...v4.3.0

v4.2.1

🐛 Bug Fixes

  • ChatPromptSubmit: proxy event to stop and reload emits (#5400) 736a547
  • ColorModeButton: missing icon import 5f30ccf, closes #5486
  • Icon: improve name type (#5498) b654a77
  • Link: define NuxtLinkProps instead of importing from #app (#5491) da8daaa
  • Link: ensure consistency across Nuxt, Vue and Inertia a9ed10d, closes #5012
  • module: put back #build/ui.css alias (#5499) d9aadc7

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v4.2.0...v4.2.1

v4.2.0

✨ Highlights

📅 New InputDate & InputTime components

Two new components are now available to handle date and time inputs: InputDate (#5387) and InputTime (#5302).

<script setup lang="ts">
const date = ref(new CalendarDate(2022, 2, 3))
const time = ref(new Time(12, 30, 0))
</script>

<template>
  <UInputDate v-model="date" />

  <UInputTime v-model="time" />
</template>

🎨 Tailwind CSS prefix

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.

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  }
})

@import "tailwindcss" prefix(tw);
@import "@nuxt/ui";

🚨 Breaking Changes

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:

{
  "compilerOptions": {
    "paths": {
      "#build/ui": [
-       "./node_modules/@nuxt/ui/.nuxt/ui"
+       "./node_modules/.nuxt-ui/ui"
      ]
    }
  }
}

🚀 Features

🐛 Bug Fixes

  • AuthForm: ensure header is shown with leading slot (#5405) (b61127a)
  • AuthForm: use password input id for aria-controls (#5312) (55ea9be)
  • ChatPrompt: proxy disabled prop (a8f2156), closes #5300
  • CheckboxGroup/RadioGroup/Switch: consistent disabled styles (ddd8faf), closes #5391
  • ColorModeButton: use css to display color mode icon (#5394) (1d1c638)
  • CommandPalette/ContentSearch: improve performances and filtering logic (#5433) (e751b37)
  • components: calc virtualizer estimateSize based on item description (56ae8e7)
  • components: consistent exposed refs (#5385) (fce2df4)
  • components: remove locale / dir props proxy (#5432) (a6efa7a)
  • ContentNavigation/NavigationMenu/Tabs: ensure proper badge display (e5c11e6)
  • ContentSearchButton/DashboardSearchButton: hide label and trailing with css when collapsed (3e72bf8)
  • FileUpload: ensure native validation works with required (#5358) (eb491e1)
  • Form: refine nested prop type handling and simplify logic (#5360) (8d5c26f)
  • inertia: set serverRendered dynamically to prevent SSR crash (#5396) (c0da1b2)
  • Input/InputNumber/Textarea: make modelModifiers generic (#5361) (5c347af)
  • InputMenu: prevent change event when selecting create item (418c87b), closes #4664
  • Link: partial extend for vue-router and inertia (637ef58)
  • Marquee: move keyframes into global css (1e6242e)
  • module: detect lazy components when using experimental.componentDetection (5a5ac45)
  • module: properly export composables from module (cb25902), closes #5370
  • module: scan layers when using experimental.componentDetection (9872740), closes #5389
  • NavigationMenu: hide label and trailing with css when collapsed (f004031), closes #4254
  • NavigationMenu: proxy modelValue / defaultValue in vertical orientation (cffaaaa), closes #5392
  • ProseCallout: add inline-block class to icon (#5317) (fc36f69)
  • RadioGroup: update update:modelValue emit type (#5349) (4cb0638)
  • Table: apply styles to th based on column meta (#5418) (620defa)
  • types: export missing utils types (#5448) (5f0a107)
  • vite: write theme templates (#5355) (411ebcc)
  • vue: check import.meta.env.SSR to support vite-ssg (#5347) (8f38c04)

🌐 Locales

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v4.1.0...v4.2.0

v4.1.0

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

nuxt.config.ts
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

🐛 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

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0

v3.3.6

🐛 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: https://github.com/nuxt/ui/compare/v3.3.5...v3.3.6

v4.0.1

🐛 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

Full Changelog: https://github.com/nuxt/ui/compare/v4.0.0...v4.0.1

v4.0.0

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 💚

v3.3.5

🐛 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

Full Changelog: https://github.com/nuxt/ui/compare/v3.3.4...v3.3.5

v4.0.0-beta.0

🐛 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

Full Changelog: https://github.com/nuxt/ui/compare/v4.0.0-alpha.2...v4.0.0-beta.0

v4.0.0-alpha.2

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.

🚨 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

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v4.0.0-alpha.1...v4.0.0-alpha.2

v4.0.0-alpha.1

📚 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

Full Changelog: https://github.com/nuxt/ui/compare/v4.0.0-alpha.0...v4.0.0-alpha.1

v3.3.3

🚀 Features

  • useFormField: export form errors injection key (#4808) (ec2bc0a)

🐛 Bug Fixes

  • components: broken types for update:model-value event (#4853) (7133f50)
  • Form: default slot types (#4758) (a32cc37)
  • Form: update Form interface to accept RegExp (#4821) (0c2d390)
  • InputMenu/Select/SelectMenu: show placeholder when model value is falsy (#4825) (90b5daf)
  • InputMenu: prevent focus-outside event on content (77b6b9a)
  • Link: ensure target _blank is flagged as external for Inertia (#4746) (520b277)
  • Table: ensure colspan calc for loading and empty states (#4826) (bdcc8c4)

New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.3.2...v3.3.3

v4.0.0-alpha.0

📚 Documentation

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

🚨 Breaking Changes

Read the migration guide to v4.

Full Changelog: https://github.com/nuxt/ui/compare/v3.3.2...v4.0.0-alpha.0

v3.3.1

🚀 Features

🐛 Bug Fixes

  • Drawer: improve closing animation with inset prop (#4676) (9da1527)
  • FileUpload: handle wildcard in dropzone dataTypes (#4671) (729bed4)
  • FileUpload: improve file removal a11y (#4607) (f90bba0)
  • FileUpload: open dialog on keyup (#4629) (8e9265e)
  • FileUpload: prevent default on keydown (#4633) (68d8a98)
  • Input: incorrect rendering of type date / time on iOS (#4715) (93cc83c)
  • InputMenu/Select/SelectMenu: add display value fallback when no items found (#4689) (34ca811)
  • Select/InputMenu: handle focus via label inside a FormField (#4696) (55dbcd2)
  • Tabs: add missing Badge import (#4594) (fbec29c)
  • Toast: add type for progress ui prop (#4677) (a8af85c)
  • Tooltip: render only if text or kbds are present (#4568) (5e39cbb)

New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.3.0...v3.3.1

v3.3.0

✨ Highlights

☁️ New FileUpload Component

Introducing a powerful new FileUpload component that makes file uploads effortless with built-in drag-and-drop and validation support (#4564).



Learn more: https://ui.nuxt.com/components/file-upload

🎨 Global Default Variants

Configure global defaults for color and size across all components to reduce boilerplate and ensure consistent styling (#4400).

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      defaultVariants: {
        color: 'neutral',
        size: 'sm'
      }
    }
  }
})

Learn more: https://ui.nuxt.com/getting-started/installation/nuxt#themedefaultvariants

📊 Enhanced Table Component

Major improvements to the Table component bring enhanced functionality and better user experience:

  • Footer support for column summaries (#4194)
  • Context menu support (#4259)
  • Colspan and rowspan support (#4460)
  • Row hover events for better interactivity (#2435)
  • Custom styles in table and column meta (#4513)

Learn more: https://ui.nuxt.com/components/table

🚀 Features

🐛 Bug Fixes

  • Button/Link: merge active-class / inactive-class with app config (#4446) (9debce7)
  • Button: add active styles to behave like hover on mobile (df8f202), closes #991
  • Carousel/Tree: add type to button elements for accessibility (#4493) (fc24e03)
  • Carousel: add aria-current attribute to active dot (#4447) (1ba8a55)
  • Carousel: improve accessibility (55e06e9), closes #4494
  • Carousel: resolve plugins with page transitions (#4380) (3b67d54)
  • ColorPicker: update color conversion logic (#4550) (6b6ec8c)
  • CommandPalette: remove rtl:space-x-reverse from label (#4576) (4682ded)
  • defineShortcuts: allow extra keys to be combined with shift (#4456) (772631c)
  • defineShortcuts: always pass event to shotcut handler (#4516) (ef473c3)
  • FormField: improve error type with boolean (a4d0ca7), closes #4496
  • FormField: resolve minor accessibility and rendering issues (#4515) (c64c4cd)
  • InputMenu/SelectMenu: filter null items in search (488707e)
  • InputMenu/SelectMenu: improve display value without valueKey (4d4234d), closes #4528
  • InputMenu/SelectMenu: only filter non-null fields (c92f908), closes #4509
  • InputMenu: reset search term on mounted (cb160e6), closes #3993
  • module: merge user's options when installing modules (78f92a2)
  • NavigationMenu/Tabs: display badge when not undefined (b22891a)
  • NavigationMenu/Tabs: proxy fallthrough attributes (836f748)
  • RadioGroup: improve type safety for normalizeItem function (#4535) (bb99345)
  • Table: add scope attribute to headers (#4417) (347694b)
  • Table: handle reactive columns (#4412) (4ce6540)
  • theme: colors autocomplete in app config (752e2b6)
  • Toast: only show progress when open (1d052ec), closes #4464
  • Tooltip: display separator only with text and kbds (#4570) (63476e5)
  • useLocale: ensure inject defaults to en (df1abf1), closes #4579
  • useLocale: prevent hydration error when switching locale (15c7991)
  • useOverlay: don't use patch when passing props to open (#4497) (5ad7dab)
  • useOverlay: improve props handling by merging existing and new (#4478) (6519a74)
  • useOverlay: support infering close argument from complex emits (#4414) (d7aefa5)
  • vue: handle override when importing from @nuxt/ui (57a5037)
  • vue: stub clearError (d8160ba)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.2.0...v3.3.0

v3.2.0

✨ Highlights

🏷️ New InputTags Component

A powerful new component for managing multiple input values with a clean, tag-based interface (#4261).

Learn more: https://ui.nuxt.com/components/input-tags

⏱️ New Timeline Component

Introducing the Timeline component for displaying chronological sequences and process flows (#4215).

Learn more: https://ui.nuxt.com/components/timeline

🚨 Breaking Changes

  • useOverlay: correct spelling of unmount function (#4051)

🚀 Features

🐛 Bug Fixes

  • Card/Drawer/Modal: prevent scrollbars overflow (#4368) (c3adc38)
  • components: remove default md size on buttons (#4357) (be41aed)
  • defineShortcuts: allow meta_- shortcut (#4321) (4e7c1c9)
  • Form: conditionally type form data via transform prop (#4188) (37abcc6)
  • Form: expose reactive fields (#4386) (1a8feb7)
  • InputMenu/SelectMenu: dynamic empty size (ba3c6e8), closes #4377
  • Modal/Slideover: don't emit close:prevent on closeAutoFocus (150b334)
  • NavigationMenu: nested accordion context at every level (#4363) (2fa8db6)
  • NavigationMenu: set content max-height in horizontal orientation (62bc7b2), closes #4208
  • Pagination: match default button size (#4350) (4dd56c8)
  • Select/SelectMenu: display falsy values (7df7ee3)
  • Select/SelectMenu: prevent empty string display when multiple (483e473)
  • SelectMenu: dynamic input size (b0364b9)
  • Table: use tr as separator (#4083) (edca3bc)
  • Toast: calc height on next tick (3bf5acb), closes #4265
  • Toaster: smoother visibility transition for stacked toasts (#4367) (abfd0ed)
  • useOverlay: correct spelling of unmount function (#4051) (546df57)
  • useOverlay: set props to original props when defaultOpen is set (#4308) (66355ba)
  • useOverlay: use original props when not provided to open (#4269) (bf56e15)

🌐 Locales

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.1.3...v3.2.0

v3.1.3

🚨 Breaking Changes

  • NavigationMenu: revert new collapsible field

In previous patch, we introduced a new collapsible field in items to display children in collapsed state as well as making the parent element respect its link attributes. However, it didn't feel right so we removed it in favor of https://github.com/nuxt/ui/commit/1e2a10b4bdebaef12316ac60f98a956dad21c1ec, https://github.com/nuxt/ui/commit/9cf9f25f4424447691e03e9034155d1541badd43 and https://github.com/nuxt/ui/commit/f2682fd2ae8abb7807977727fc22ef34cb5752e5.

  1. Parent items now respect their link attributes and clicking the trailing icon arrow expand/collapse its children.
  2. You can force a parent to behave like before (without link attributes) using type: 'trigger'.
  3. When collapsed, you can use the popover / tooltip props or item fields:

🚀 Features

  • Modal/Slideover: add after:enter event (#4187) (d9e9fea)
  • NavigationMenu: add tooltip and popover props (f2682fd), closes #4186
  • NavigationMenu: add trigger type in items (9cf9f25)
  • NavigationMenu: handle vertical orientation with Accordion instead of Collapsible (1e2a10b), closes #4072 #3911
  • Popover: add anchor slot (#4119) (473513c)

🐛 Bug Fixes

  • CheckboxGroup/RadioGroup: variant table borders in RTL mode (#4192) (43d281f)
  • CommandPalette: add presentation role to viewport (2ba94db)
  • ContextMenu/DropdownMenu: wrap groups in a viewport (dcf34a7), closes #3315
  • Drawer: improve title & description accessibility (41087d4), closes #4199
  • icons: update loading icon (#4163) (fe4e1f8)
  • Input/Textarea: define model modifiers types (#4195) (3243fb8)
  • InputMenu/Select/SelectMenu: manual viewport to display scrollbars (f95abf8), closes #4069
  • NavigationMenu: incorrect hover when disabled and active (d0be599)
  • NavigationMenu: only display tooltip when collapsed (44f536f)
  • NavigationMenu: revert new collapsible field (3c78e2f)
  • Textarea: missing imports (#4207) (6aab62e)
  • theme: define old-neutral color as static (#4193) (dae9f0b)
  • Tooltip: increase padding for consistency (0634a75)

🌐 Locales

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.1.2...v3.1.3

v3.1.2

🚀 Features

🐛 Bug Fixes

  • Badge/Button: handle zero value in label correctly (#4108) (f244d15)
  • ButtonGroup: add z-index on focused element (204953b)
  • Calendar: wrong color for today date with neutral color (7d51a9e), closes #4084 #3629
  • Checkbox/RadioGroup: render correct element without variant (f2fd778), closes #3998
  • CheckboxGroup: relative UCheckbox import (7551a85), closes #4090
  • ColorPicker: make thumb touch draggable (#4101) (cc20a26)
  • components: class should have priority over ui prop (e6e510b)
  • FormField: block form field injection after use (#4150) (d79da9d)
  • FormField: use div for error and help slots (459a041)
  • inertia: link always render as anchor tag (#3989) (e81464a)
  • inertia: make useAppConfig reactive (12303a8)
  • Input/Textarea: handle generic types (3c8d6cd), closes nuxt/ui-pro#887
  • InputNumber: handle inside button group (2e4c308), closes #4155
  • Link: consistent behavior between nuxt, vue and inertia (#4134) (67da90a)
  • module: configure @nuxt/fonts with default weights (276268d)
  • NavigationMenu: arrow position conflict (#4137) (0dc4678)
  • Select: support more primitive types in value field (#4105) (09b4699)
  • Slider: handle generic types (d7a4d02)
  • Stepper: use div tag for title & description (a57844e), closes #4096
  • Tabs: prevent trigger truncate without parent width (06e5689), closes #4056
  • Tabs: set focus:outline-none with link variant (999a0f8)
  • templates: dont write unused variants in theme files (d3df3bb)
  • Toaster: allow base slot override (c63d2f3)
  • vue: make useAppConfig reactive (869c070), closes #3952

🌐 Locales

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.1.1...v3.1.2

v3.1.1

🚀 Features

🐛 Bug Fixes

  • Calendar: add place-items-center to grid row (#4034) (8dfdd63)
  • defineShortcuts: bring back meta to ctrl convert on non macos platforms (f3b8b17), closes #3869 #3318
  • module: support nuxt-nightly (#3996) (bc0a296)
  • NavigationMenu: remove sm:w-auto from content slot (aebf0b3), closes #3987
  • RadioGroup: improve items value field type (#3995) (195773e)
  • templates: put back args to watch in dev (#4033) (c5bdec0)
  • theme: add missing border-bg / divide-bg utilities (82b5f32)
  • theme: add missing ring-offset-* utilities (#3992) (e5df026)
  • theme: define default shades for named tailwindcss colors (8acf3c5), closes #3977
  • theme: improve app config types for ui object (591d59f), closes #3579
  • theme: use @theme inline to properly reference css variables (6131871), closes #4018
  • useOverlay: improve types and docs (#4012) (39e29fc)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.1.0...v3.1.1

v3.1.0

✨ Highlights

🎨 Improved Utility Classes

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
- <div class="text-(--ui-primary)">
+ <div class="text-primary">

- <div class="bg-(--ui-error)">
+ <div class="bg-error">
  • 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
- <div class="text-(--ui-text-muted)">
+ <div class="text-muted">

- <div class="border-(--ui-border)">
+ <div class="border-default">

- <div class="bg-(--ui-bg-elevated)/50">
+ <div class="bg-elevated/50">

- <div class="rounded-(--ui-radius)">
+ <div class="rounded-sm">

- <div class="rounded-[calc(var(--ui-radius)*1.5)]">
+ <div class="rounded-md">

- <div class="rounded-[calc(var(--ui-radius)*2)]">
+ <div class="rounded-lg">

These changes are fully backward compatible - existing CSS variable-based classes will continue to work while providing a more ergonomic alternative for new code.

🧩 New Components and Features

<script setup lang="ts">
import type { CheckboxGroupItem, CheckboxGroupValue } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<CheckboxGroupValue[]>(['System'])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>

<script setup lang="ts">
import type { RadioGroupItem, RadioGroupValue } from '@nuxt/ui'

const items = ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<RadioGroupValue>('System')
</script>

<template>
  <URadioGroup v-model="value" variant="table" :items="items" />
</template>

🌉 Inertia.js Integration

The Vue version now includes built-in support for Inertia.js. Enable it with the inertia: true option in your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      inertia: true
    })
  ]
})

This automatically replaces RouterLink with InertiaLink in all components, providing seamless integration with your Inertia.js applications: https://ui.nuxt.com/getting-started/installation/vue#inertia

⚡ Module Builder Update

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.

🚨 Breaking Changes

  • 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:

<script setup lang="ts>
const modal = useOverlay()

- const result = await modal.open({ count: count.value })
+ const instance = modal.open({ count: count.value })
+ const result = await instance.result
</script>

🚀 Features

  • App: add global portal prop (#3688) (29fa462)
  • Carousel: add select event (#3678) (22edfd7)
  • CheckboxGroup: new component (#3862) (9c3d53a)
  • components: add new content-top and content-bottom slots (#3886) (1a46394)
  • Form: add attach prop to opt-out of nested form attachement (#3939) (1a0d7a3)
  • Form: export loading state (#3861) (fdee252)
  • InputMenu/SelectMenu: handle resetSearchTermOnSelect (cea881a), closes #3782
  • InputNumber: add support for stepSnapping & disableWheelChange props (#3731) (f5e6284)
  • Modal/Popover/Slideover: add close:prevent event (#3958) (f486423)
  • module: define default color shades (#3916) (7ac7aa9)
  • module: define neutral utilities (#3629) (d49e0da)
  • module: dynamic rounded-* utilities (#3906) (f9737c8)
  • OverlayProvider: return an overlay instance from .open() (#3829) (f3098df)
  • PinInput: add autofocus / autofocus-delay props (0456670), closes #3717
  • RadioGroup: add card and table variants (#3178) (4d138ad)
  • Select: handle onSelect field in items (8640831)
  • Table: conditionally apply classes to tr and td (#3866) (80dfa88)
  • Tabs: add list-leading and list-trailing slots (#3837) (3447a06)
  • Textarea: add autoresize-delay prop (06414d3), closes #3730
  • Textarea: add icon, loading, etc. props to match Input (cb193f1)
  • Textarea: add resize-none class with autoresize prop (ffafd81)
  • unplugin: routing support for inertia (#3845) (d059efc)

🐛 Bug Fixes

  • Accordion: use div instead of h3 for header tag (75e4792), closes #3963
  • Alert/Toast: display actions when using slots (5086363), closes #3950
  • Carousel: move arrows inside container on mobile (d339dcb), closes #3813
  • CommandPalette: consistent alignement with other components (d25265c)
  • CommandPalette: increase input font size to avoid zoom (d227a10)
  • CommandPalette: prevent hover background on disabled items (ba534f1)
  • components: refactor types after @nuxt/module-builder upgrade (#3855) (39c861a)
  • components: respect transform-origin in popper content (#3919) (01d8dc7)
  • ContextMenu/DropdownMenu: handle RTL mode (#3744) (1ae5cc0)
  • ContextMenuContent/DropdownMenuContent: remove unwanted any (#3741) (97274f1)
  • Form: input and output type inference (#3938) (f429498)
  • Form: loses focus on submit (#3796) (8e78eb1)
  • InputMenu/SelectMenu: correctly call onSelect events (#3735) (f25fed5)
  • InputMenu/SelectMenu: prevent disabled items to be selected (8435a0f), closes #3474
  • InputMenu/SelectMenu: remove valueKey string case (9ca213b), closes #3949 #3331
  • InputMenu/SelectMenu: support arbitrary value (#3779) (52a97e2)
  • InputMenu: emit change on multiple item removal (9d2fed1), closes #3756
  • Link: proxy download property (#3879) (47cdc2e)
  • NavigationMenu: add sm:w-auto content slot (abe0859), closes #3788
  • Skeleton: improve accessibility (#3613) (3484832)
  • Stepper: ui prop override on icon and content slots (1d45980), closes #3785
  • Table: improve data reactivity (#3967) (6e27304)
  • Table: pass header colspan to th (#3926) (122e8ac)
  • Tree: simplify reusable template types (#3836) (3deed4c)
  • types: allow color identifiers with dashes (#3896) (e5a1e26)
  • types: handle ClassValue in ui prop (eea1415), closes #3860
  • types: improve dynamic slots (#3857) (8dd9d08)
  • usePortal: adjust portal target resolution logic (#3954) (db11db6)
  • vite: vitest skipping nuxt imports transformations (#3925) (c31bffa)

🌐 Locales

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.2...v3.1.0

v2.22.0

✨ Highlights

  • deps: update @nuxt/module-builder to v1 (#3801)

The module has been updated to use nuxt/module-builder@1.0.0!

🚨 Breaking Changes

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

🐛 Bug Fixes

  • Link: properly pick all aria-* & data-* attrs (2bef1e2), closes #3007
  • Table: checkbox still emit @select event (#3269) (c0e14d0)
  • Table: remove type annotation in template (4e96dcc), closes #3146

Full Changelog: https://github.com/nuxt/ui/compare/v2.21.1...v2.22.0

v3.0.2

🚀 Features

  • Calendar: allow year and month buttons styling (#3672) (4a2b77d)
  • Table: add empty prop (afff54f)

🐛 Bug Fixes

  • Avatar: proxy $attrs to default slot (#3712) (88f349d)
  • Button: use focus:outline-none instead of focus:outline-hidden (c231fe5), closes #3658
  • CommandPalette: use group.id as key (bc61d29)
  • components: improve generic types (#3331) (b998354)
  • Container: add w-full class (df00149)
  • defineShortcuts: remove @__NO_SIDE_EFFECTS__ (82e2665)
  • Drawer: remove fadeFromIndex prop proxy (f7604e5)
  • Form: clear dirty state after submit (#3692) (3dd88ba)
  • FormField: add help to aria-describedby attribute (#3691) (20c3392)
  • InputMenu/SelectMenu: empty search results (94b6e52)
  • InputMenu: reset searchTerm on update:open (3074632), closes #3620
  • Link: handle aria-current like NuxtLink / RouterLink (c531d02)
  • Link: prevent active="true" binding on html (d73768b)
  • Link: properly pick all aria-* & data-* attrs (ade16b7)
  • Link: proxy onClick (370054b), closes #3631
  • NavigationMenu: add z-index on viewport (0095d89), closes #3654
  • Switch: prevent transition on focus outline (68787b2)
  • Table: wrong condition on caption slot (4ebb94c)
  • Tabs: remove focus:outline-hidden class (1769d5e)
  • types: add missing export for ButtonGroup (#3709) (e7e6745)
  • useOverlay: refine open method type to infer close emit return type (#3716) (bd99c2d)
  • vue: mock nuxtApp.hooks & useRuntimeHook (23bfeb9)

🌐 Locales

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.1...v3.0.2

v3.0.1

✨ Highlights

  • module: handle tailwindcss import without theme(static) (#3630) (ecff9ab)

You no longer need to use theme(static) when importing tailwindcss! 🎉

main.css
- @import "tailwindcss" theme(static);
+ @import "tailwindcss";

However, you might still need this when using Tailwind CSS variables in your code explicitly like this for example:

<span
  :class="`bg-(--color-light) dark:bg-(--color-dark)`"
  :style="{
    '--color-light': `var(--color-${chip}-500)`,
    '--color-dark': `var(--color-${chip}-400)`
  }"
/>

🚨 Breaking Changes

  • Form: drop explicit support for zod and valibot (#3617) (9a4bb34)

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.

We've updated to vaul-vue@0.4.0 which powers the Drawer component. There's no longer a handle slot, the theme handle slot has changed a bit with some important values but you have access to a handle-only prop now: https://ui.nuxt.com/components/drawer#handle-only

🚀 Features

  • components: handle events in content prop (5dec0e1)

🐛 Bug Fixes

  • Calendar: grey out days outside of displayed month (#3639) (a516866)
  • ContextMenu/DropdownMenu: remove any from proxySlots (#3623) (764c41a)
  • Modal/Slideover/Toast: prevent unnecessary close instantiation (f4c417d)
  • module: handle tailwindcss import without theme(static) (#3630) (ecff9ab)
  • module: mark functions used in exports as pure (#3604) (57efc78)
  • RadioGroup: handle disabled on items (fe0bd83), closes nuxt/ui-pro#911
  • Table: allow links to be opened when @select is used (#3580) (e80cc15)
  • types: add missing export for Icon (#3568) (5e62493)
  • unplugin: include @compodium/examples in auto-imports paths (#3585) (cc504b8)
  • useLocale: unique symbol to use in @nuxt/ui-pro (#3603) (dec2730)
  • vue: missing unhead context (#3589) (0897e9e)

🌐 Locales

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.0...v3.0.1

v3.0.0

We are thrilled to introduce Nuxt UI v3, a comprehensive redesign of our UI library that delivers significant improvements in accessibility, performance, and developer experience. This major update represents over 1,500 commits of dedicated work, collaboration, and innovation from our team and the community.

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

Get started with Nuxt UI v3 →

✨ Highlights

🧩 Reka UI: A New Foundation

We've transitioned from Headless UI to Reka UI as our core component foundation, bringing:

  • Expanded Component Library: Access to 55+ primitives, significantly expanding our component offerings
  • Future-Proof Development: Benefit from Reka UI's growing popularity and continuous improvements
  • First-Class Accessibility: Built-in accessibility features aligned with our commitment to inclusive design

🚀 Tailwind CSS v4 Integration

Nuxt UI now leverages the latest Tailwind CSS v4, delivering:

  • Exceptional Performance: Full builds up to 5× faster, with incremental builds over 100× faster
  • Streamlined Toolchain: Built-in import handling, vendor prefixing, and syntax transforms with zero additional tooling
  • CSS-First Configuration: Customize and extend the framework directly in CSS instead of JavaScript configuration

🎨 Tailwind Variants

We've adopted Tailwind Variants to power our design system, offering:

  • Dynamic Styling: Create flexible component variants with a powerful, intuitive API
  • Type Safety: Full TypeScript support with intelligent auto-completion
  • Smart Conflict Resolution: Efficiently merge conflicting styles with predictable results

📝 Enhanced TypeScript Integration

Nuxt UI provides significantly improved TypeScript support:

  • Intelligent Auto-completion for component props based on your theme configuration
  • Generic-based Components built using Vue 3 Generics with improved type inference for slots and events
  • Type-safe Theming leveraging Tailwind Variants with customizable types for extended configurations

🔄 Vue Compatibility

Use Nuxt UI in any Vue project without Nuxt by adding the Vite and Vue plugins to your configuration:

  • Auto-imports: Components and composables automatically imported and available globally
  • Complete Theming: Full theming support with customizable colors, sizes, variants, and more
  • Superior Developer Experience: Comprehensive TypeScript support with IntelliSense and auto-completion

Get started with Nuxt UI for Vue →

Migration from v2

We want to be transparent: migrating from Nuxt UI v2 to v3 requires significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up to provide enhanced capabilities.

To upgrade your project:

  1. Read our detailed migration guide
  2. Review the new documentation and components before attempting to upgrade
  3. Report any issues on our GitHub repository

🙏 Acknowledgements

This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality, especially @romhml, @sandros94, and @hywax for their tremendous work.

v3.0.0-beta.4

🚨 Breaking Changes

Nuxt UI v3.0.0-beta.4 requires Nuxt v3.16 to work, please upgrade your Nuxt to continue using @nuxt/ui:

nuxi upgrade --force

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.0-beta.3...v3.0.0-beta.4