Releases · nuxt/ui

@jvbianchi

🚀 Features

Badge: add square prop (#4008) (894e8a6)
CheckboxGroup: add table variant (#3997) (1b6ab27)
components: add ui field in items (#4060) (b9adc83)
InputNumber: add increment-disabled / decrement-disabled props (#4141) (c7fba2e)
NavigationMenu: add collapsible field in items (2be60cd), closes #3353 #3911
NavigationMenu: handle tooltip in items (46c2987), closes #4050
Slider: handle tooltip around thumbs (d140acc), closes #1469
Toast: add progress prop to hide progress bar (#4125) (92632e9)

🐛 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

locale: add Slovenian language (#4140) (e86dc79)

👋 New Contributors

@jvbianchi made their first contribution in #3989
@mkalino1 made their first contribution in #4101
@kacijan made their first contribution in #4140
@J-Michalek made their first contribution in #4060

Full Changelog: v3.1.1...v3.1.2

@reslear

🚀 Features

useOverlay: add closeAll method (#3984) (ac4c194)
useOverlay: add isOpen method to check overlay state (#4041) (a4f3f6d)

🐛 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

@reslear made their first contribution in #3995
@vitorCamarotto made their first contribution in #4034
@leyenda made their first contribution in #4047
@jezmck made their first contribution in #4044

Full Changelog: v3.1.0...v3.1.1

✨ 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">

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

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

CheckboxGroup (#3862): A new component for managing groups of checkboxes with built-in form integration and validation: https://ui.nuxt.com/components/checkbox-group

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

RadioGroup (#3178): Enhanced with new card and table variants for more flexible layouts: https://ui.nuxt.com/components/radio-group#variant

<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](https://github.co...

✨ 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: v2.21.1...v2.22.0

@w33bvGL

🚀 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

locale: add Armenian language (#3664) (c76f590)

👋 New Contributors

@w33bvGL made their first contribution in #3664
@BobbieGoede made their first contribution in #3675
@Lionad-Morotar made their first contribution in #3712

Full Changelog: v3.0.1...v3.0.2

@jwoertink

✨ Highlights

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

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

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

deps: update vaul-vue (f401766)

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

locale: add Catalan language (#3550) (53cf1b4)
locale: add Central Kurdish language (#3566) (b2034cc)
locale: add Romanian language (#3587) (0229b0f)
locale: add Urdu language (#3611) (126ba23)
locale: add Uzbek language (#3548) (302e04b)

👋 New Contributors

@jwoertink made their first contribution in #3563
@NilsEvers made their first contribution in #3568
@Kheuval made their first contribution in #3580
@harlan-zw made their first contribution in #3589
@Rizwan-malek made their first contribution in #3601
@Norbiros made their first contribution in #3623
@ArbazIrshad made their first contribution in #3611
@UlugbekNG made their first contribution in #3548
@markmelnic made their first contribution in #3587
@mickaelchanrion made their first contribution in #3550
@halwesit made their first contribution in #3566
@ac-shadow made their first contribution in #3639

Full Changelog: v3.0.0...v3.0.1

@romhml

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:

Read our detailed migration guide
Review the new documentation and components before attempting to upgrade
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.

@Justineo

🚨 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

Form: global errors (#3482) (6e03d9c)
Input/Textarea: allow null value in model (#3415) (cfe9b2e)
useLocale: handle generic messages (#3100) (a9c8eb3)

🐛 Bug Fixes

Button: missing import (21dbf01), closes nuxt/ui#3417
Form: input blur validation on submit (#3504) (97c8098)
vue: prevent calling useHead in colors (5ecd227)

👋 New Contributors

@Justineo made their first contribution in #3520

Full Changelog: v3.0.0-beta.3...v3.0.0-beta.4

@LeonidevFR

🚀 Features

Form: add standard schema support (#2880) (9c36d37)
module: add colorMode option (d2ceead), closes #3143
SelectMenu: add inputTargetForm prop to handle input validation (#3107) (feb716c)

🐛 Bug Fixes

Alert/Notification: allow description ui override (125a281), closes #2554
Table: revert #2600 to fix excessive column data slot re-renders (#3375) (23d9b51)

👋 New Contributors

@LeonidevFR made their first contribution in #3107
@coreyshuman made their first contribution in #3375

Full Changelog: v2.21.0...v2.21.1

@HessamCheraghi

🚀 Features

Button: handle active state (bd2d484), closes #3417
Table: add loading slot (99e531d), closes #3444

🐛 Bug Fixes

InputMenu/SelectMenu: proxy required in root props (60b7e2d)
InputMenu: wrong required in multiple mode (01fa230), closes #2741
Pagination: add missing slots (a47c5ff), closes #3441
Pagination: wrong next link (e823022), closes #3008
templates: prevent overriding existing colors (ccbd89c), closes #3426

👋 New Contributors

@HessamCheraghi made their first contribution in #3447
@Baroshem made their first contribution in #3449

Full Changelog: v3.0.0-beta.2...v3.0.0-beta.3

Releases: nuxt/ui

v3.1.2

🚀 Features

🐛 Bug Fixes

🌐 Locales

👋 New Contributors

Contributors

Uh oh!

v3.1.1

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Contributors

Uh oh!

v3.1.0

✨ Highlights

🎨 Improved Utility Classes

🧩 New Components and Features

🌉 Inertia.js Integration

⚡ Module Builder Update

🚨 Breaking Changes

🚀 Features

🐛 Bug Fixes

Contributors

Uh oh!

v2.22.0

✨ Highlights

🚨 Breaking Changes

🐛 Bug Fixes

Uh oh!

v3.0.2

🚀 Features

🐛 Bug Fixes

🌐 Locales

👋 New Contributors

Contributors

Uh oh!

v3.0.1

✨ Highlights

🚨 Breaking Changes

🚀 Features

🐛 Bug Fixes

🌐 Locales

👋 New Contributors

Contributors

Uh oh!

v3.0.0

✨ Highlights

🧩 Reka UI: A New Foundation

🚀 Tailwind CSS v4 Integration

🎨 Tailwind Variants

📝 Enhanced TypeScript Integration

🔄 Vue Compatibility

Migration from v2

🙏 Acknowledgements

Contributors

Uh oh!

v3.0.0-beta.4

🚨 Breaking Changes

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Contributors

Uh oh!

v2.21.1

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Contributors

Uh oh!

v3.0.0-beta.3

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Contributors

Uh oh!