Changelog

Display GitHub release notes as a beautiful changelog for any repository with this Nuxt UI template.
DocumentationGitHub

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 nuxt/ui@1e2a10b, nuxt/ui@9cf9f25 and nuxt/ui@f2682fd.

  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

v2.21.1

🚀 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

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

v3.0.0-beta.3

🚀 Features

🐛 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

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

v3.0.0-beta.1

✨ Highlights

  • Tree: new component (#3180)

https://ui3.nuxt.dev/components/tree

🚨 Breaking Changes

  • deps: update tailwindcss to ^4.0.8 (#3373)

Tailwind CSS made some breaking changes in 4.0.8 where they don't rely on the module graph to discover classes anymore and where they remove unused CSS variables.

The first issue has been fixed internally in #3373 but for the second you now need to use theme(static) when importing tailwindcss: https://ui3.nuxt.dev/getting-started/theme#theme

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme static {
  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

You can read more about this in #3374

  • module: remove devtools in favor of compodium (#3380)

@romhml who initially created the Nuxt UI devtools, moved all the logic into a separate compodium module in #3380 to avoid polluting the @nuxt/ui package with 7MB+ of component metas.

This module now works for any component in your app, not just Nuxt UI ones which gives way more flexibility.

You can install the module in your Nuxt application with one command:

npx nuxi module add compodium
  • useOverlay: handle programmatic modals and slideovers (#3279)

@genu who initially created the useModal and useSlideover composables in Nuxt UI v2 made a significant refactor in #3279 which merges the two composables into a single useOverlay composable. This is a big breaking change but brings lots of improvements as you can read in the PR.

🚀 Features

🐛 Bug Fixes

  • Avatar: render on SSR (67e5465)
  • CommandPalette: wrong ellipsis color (ada04f6)
  • components: missing $attrs bind (#3152) (fb36df5)
  • Drawer/Modal/Slideover: disable close autofocus (ae30f94), closes #3227
  • Form: ensure loading state resets to false after an error (#3359) (19d76c8)
  • Link: improve external links handling in vue (b53f77b)
  • Modal/Slideover: add wrapper around title & description (bc01136)
  • Modal/Slideover: fixed header height (d33a83e), closes #3333
  • Modal: use dvh unit (aefa09c)
  • module: use key when merging modules options (9821894)
  • Tooltip: bind $attrs on trigger (637f5d3), closes #3339 #2897
  • vite: exclude @nuxt/ui from vite pre-optimization (#3352) (09492f7)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.0-alpha.13...v3.0.0-beta.1

v3.0.0-alpha.13

✨ Highlights

🎨 Tailwind CSS classes

Thanks to #2967, you can now use classes like text-primary dark:text-primary-400 like in Nuxt UI v2. We dynamically write into the @theme directive of Tailwind CSS to define the Nuxt UI design system colors (theme.colors) as Tailwind CSS colors.

🚨 Breaking Changes

  • useToast: don't return a promise on add
  • Toast: rename click to onClick for consistency
  • Alert/Toast: add orientation prop

🚀 Features

  • Alert/Toast: add orientation prop (2c192ac)
  • Badge: add support within button groups (#3224) (10fb843)
  • Card: add variant prop (847d4aa)
  • CommandPalette: support link props in items (e2b78a7), closes #3190
  • ContextMenu/DropdownMenu/NavigationMenu: add external-icon prop (5846c1e), closes #2996
  • Drawer: add inset prop (6d9b9ed), closes #2994
  • locale: add Azerbaijani language (#3209) (0fb6753)
  • locale: add Bengali (বাংলা) language (#3321) (1d09a2a)
  • module: generate tailwindcss theme colors (#2967) (443a0be)
  • Table: extends core options and support other options like pagination (#3177) (4aa3179)
  • Toast: handle vnodes in title and description (abd2be1), closes #3226
  • unplugin: expose options for embedded plugins, throw warnings for duplication (#3207) (6c20f8a)
  • useToast: proxy emits (089185f)

🐛 Bug Fixes

  • App: wrap ModalProvider / SlideoverProvider inside TooltipProvider (cd0a9d3), closes #3236
  • Badge: missing UAvatar import (49dd088), closes #3203
  • Calendar/InputMenu/Textarea: add missing PartialString type on ui prop (9d29e0b), closes #3299
  • Card: remove shadow-sm for consistency (8097fff)
  • Link: allow usage without vue-router in vue (f55e869), closes #3001
  • locale: export km (#3201) (995e07d)
  • Modal/Slideover: improve title & description accessibility (e419dcb), closes #3267 #3215
  • Modal: always fullscreen on mobile (#2637) (7641d89)
  • NavigationMenu: disable collapsible with collapsed prop (07e1b4f)
  • NavigationMenu: remove negative mb causing overflow issues (0e46c3e)
  • NavigationMenu: wrong level compute on vertical orientation (c1c9da4)
  • SelectMenu: wrap content with FocusScope (e7e7585), closes #2657
  • Table: proxy props without useForwardProps (f0553eb)
  • Toast: rename click to onClick for consistency (533e889)
  • useToast: don't return a promise on add (153f341)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.0-alpha.12...v3.0.0-alpha.13

v3.0.0-alpha.12

🚨 Breaking Changes

  • ColorPicker: migrate from color to colortranslator (#3097)
  • Form: include nested state in submit data (#3028)
  • locale: remove emoji fallback for Chinese (#3134) (1a95104)

🚀 Features

🐛 Bug Fixes

  • Alert: allow actions wrap (#3083) (e7c10bc)
  • Avatar: handle loading manually to support @nuxt/image (00c5f26), closes nuxt/ui-pro#727
  • Avatar: hide fallback when image is loaded (36d7402), closes nuxt/ui-pro#727
  • Button: wrong avatar size with block prop (ba1dd13)
  • colors: move css variables to base layer (533ccec), closes #3075
  • components: prevent multiple appConfig identifier import (#3186) (cd16b95)
  • ContextMenu/DropdownMenu: remove unnecessary bindings in html (9b5a957)
  • Form: include nested state in submit data (#3028) (de9ecb1)
  • Form: standard schema validation no longer wrapped in value object (#3104) (8f7f579)
  • locale: remove emoji fallback for Chinese (#3134) (1a95104)
  • locale: year translation missing ñ in es (#3090) (1bf370e)
  • NavigationMenu: handle children recursively in vertical orientation (2b7ff3e), closes #3128
  • NavigationMenu: highlight open items on horizontal orientation only (931211a)
  • useToast: add in queue and improve unique ids (aafddd8), closes #2686

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.0-alpha.11...v3.0.0-alpha.12

v3.0.0-alpha.11

🚨 Breaking Changes

  • Modal/Popover/Slideover: rename prevent-close to dismissible

🚀 Features

🐛 Bug Fixes

  • Accordion/Collapsible/NavigationMenu/Tabs: define unmountOnHide default (4344e36)
  • Avatar: bind $attrs on AvatarFallback (#2933) (7f64198)
  • Badge: reduce radius on sm size (f97d2e3)
  • CommandPalette/SelectMenu: missing translations (#3057) (d5dba0e)
  • components: enable pointer events on menus (#2881) (f85b098)
  • defineShortcuts: handle extract when using onSelect or onClick (#2896) (2e17fb6)
  • DropdownMenu/ContextMenu: correct bindings of checkbox items (#2921) (4c5a4fb)
  • FormField: restore eager-validation prop behavior (#3031) (41dc11c)
  • InputMenu: removing tag does not change modelValue (#3054) (5a44394)
  • locale: improve Traditional Chinese translation (#3051) (5c2c55f)
  • Modal/Popover/Slideover: rename prevent-close to dismissible + uniformize docs (6fb426f)
  • NavigationMenu: arrow styles after reka-ui migration (9759320)
  • NavigationMenu: highlight border on children only with vertical orientation (e931880)
  • NavigationMenu: remove w-full on root slot (ef7ecd2), closes #3000
  • NavigationMenu: unbind link on collapsible trigger with vertical orientation (82d6344)
  • SelectMenu: handle resetSearchTermOnBlur manually (#3082) (c902a40)
  • Stepper: correct item value type (4f05b1a)
  • Stepper: wrong item in title & description slots (473194f), closes #2888
  • templates: allow any string in colors autocomplete (5183582), closes #2143
  • templates: infer variants types in generated theme (2c99bb8)
  • unplugin: invalid url schema on windows (#2899) (9b4694f)
  • vue: head injection (#2929) (7302a84)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.0-alpha.10...v3.0.0-alpha.11

v3.0.0-alpha.10

✨ Highlights

Reka UI

With #2448, Nuxt UI v3 is now using Reka UI v1.0.0-alpha.6: the new major of Radix Vue which brings significant improvements.

However, there are a few breaking changes:

Checkbox

  • The indeterminate prop has been removed in favor of v-model / default-value: boolean | "indeterminate"

CommandPalette

  • The filter field on groups has been renamed to ignoreFilter for consistency

InputMenu/SelectMenu

  • The filter prop has been removed in favor of ignore-filter & filter-fields
  • The create-item prop no longer assign to v-model to provide more flexibility when working with objects. You have to do it yourself in the @create event which now receive only the typed string as argument.

Tabs

  • The content of inactive items is no longer rendered when unmounted by default, use :unmount-on-hide="false" to get the same result

You can read the Reka UI migration guide if you're interested: https://reka-ui.com/docs/guides/migration#form-component although most of the changes have been done internally.

Calendar

A new Calendar component has been introduced: https://ui3.nuxt.dev/components/calendar

ColorPicker

A new ColorPicker component has been introduced: https://ui3.nuxt.dev/components/color-picker

Stepper

A new Stepper component has been introduced: https://ui3.nuxt.dev/components/stepper

🚀 Features

🐛 Bug Fixes

  • Breadcrumb: missing aria-hidden on presentation items (a7a1227), closes #2725
  • Calendar: handle icons in RTL mode (#2770) (e7b69b7)
  • Calendar: omit as / asChild props (9478fc0)
  • ColorPicker: handle RTL mode (#2858) (f98b91c)
  • CommandPalette: keep ignoreFilter groups at their place (#2833) (3b9ca22)
  • components: apply class on trigger instead of content when present (a6ecef0), closes #2132
  • components: specify collisionPadding to all menus (148b024)
  • defineShortcuts: return useEventListener to unregister the listener (80befc1), closes #2031
  • devtools: error with renderer when colorMode is disabled (#2792) (f06fbaf)
  • Form: resolve async validation in yup & issue directly mutate state (#2702) (c9806da)
  • icons: make loading icon clockwise (#2797) (bc2bcb3)
  • Link: partial query match for Vue (#2787) (a6c2205)
  • locale: improve German translation (#2826) (c440c91)
  • Modal: prevent from going out of screen (b7ba2c7), closes #2711
  • NavigationMenu: wrong badge class (86f2b48), closes #2766
  • Progress: handle horizontal animation in RTL mode (#2723) (0baa3a0)
  • Stepper: handle RTL mode (#2844) (198d04d)
  • Stepper: missing import (816bb69)
  • Table: handle loading animation in RTL mode (#2771) (b1550d5)
  • Tabs: prevent hover on disabled (a938d24)
  • Tabs: truncate not working (c1ff978)
  • types: handle array of strings in AppConfig (#2854) (4b241ba)
  • useLocale: update locale import to enable tree shaking (#2735) (3bccb67)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.0-alpha.9...v3.0.0-alpha.10

v2.20.0

🚨 Breaking Changes

  • Form: resolve async validation in yup & issue directly mutate state (#2701)

🚀 Features

🐛 Bug Fixes

  • AvatarGroup/ButtonGroup/MeterGroup: allow deeply partial ui config (#2542) (bf58086)
  • Carousel: wrong ui type with strategy (07ef771)
  • components: replace as const with correct type in config (#2652) (51c8b8e)
  • DatePicker: undefined dayIndex (#2545) (ce955d2)
  • Form: resolve async validation in yup & issue directly mutate state (#2701) (f3632dd)
  • Form: use parsed value from joi instead of original state (#2587) (acecff4)
  • InputMenu/SelectMenu: use by prop to compare objects & support dot notation in value-attribute (#2566) (7154254)
  • Link: exactQuery prop type (#2781) (4cde571)
  • Notification: element renders even when no notification is present (#2561) (d4e408c)
  • Table: data outdated when rows change (#2600) (b23f2de)
  • Table: missing type on props loadingState (#2551) (6e66990)
  • Table: prevent onClick while blocking element (#2592) (9703786)
  • types: improve DeepPartial type for App Config (#2621) (976b03f)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.19.2...v2.20.0

v3.0.0-alpha.9

This release is based on latest tailwindcss@4.0.0-alpha.34 and radix-vue@1.9.10.

✨ Highlights

Internationalization (i18n)

Nuxt UI v3 now supports internationalization for Nuxt and Vue with automatic direction (ltr / rtl) and already 12 locales translated.

You can read more on https://ui3.nuxt.dev/getting-started/i18n/nuxt

InputNumber

A new InputNumber component based on https://www.radix-vue.com/components/number-field.html.

You can read more on https://ui3.nuxt.dev/components/input-number

PinInput

A new PinInput component based on https://www.radix-vue.com/components/pin-input.html

You can read more on https://ui3.nuxt.dev/components/pin-input

🚀 Features

🐛 Bug Fixes

  • App: missing vue imports (ddb4690)
  • App: remove dir prop (#2630) (7cc26d0)
  • Breadcrumb/Carousel/Pagination: handle icons in RTL mode (#2633) (e5119a9)
  • Breadcrumb: render as nav (756f791), closes #2649
  • Button: improve neutral solid variant hover (8d85498)
  • Carousel: use dir from locale (#2647) (1fbbfe8)
  • ContextMenu/DropdownMenu: relative imports with prefix (47f58f5)
  • css: --font-family-sans renamed to --font-sans (#2680) (b2fa657)
  • css: remove useless spacing override (8d00265)
  • FormField: missing conditions to apply container classes (#2631) (9241ba1)
  • Form: match error-pattern on input validation (#2606) (3584a33)
  • InputMenu/SelectMenu: init filter with labelKey (18931ac)
  • InputMenu/SelectMenu: look in items only with value-attribute (0ceafe1), closes #2464
  • InputMenu/SelectMenu: multiple not working with generic boolean casting (503f701), closes #2541
  • InputMenu/SelectMenu: use isEqual from ohash (f943f88)
  • Link: missing relative import (#2588) (95a0bbc)
  • Modal/Slideover: prevent esc with prevent-close prop (9e2cc5b), closes #2501
  • module: remove fast-deep-equal in favor of custom isEqual (37a3597)
  • module: skip devtools renderer page injection if router integration is disabled (#2571) (afe4003)
  • Textarea: autoresize does not work when initializing modelValue (#2681) (d3a079a)
  • Toaster: teleport to body (b0be26d), closes #2404
  • Toast: unreachable behind overlays (#2650) (0daac5b)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.0-alpha.8...v3.0.0-alpha.9

v3.0.0-alpha.8

✨ Highlights

Vue compatibility

In #2416 by @danielroe, you can now use Nuxt UI in any Vue project without Nuxt: https://ui3.nuxt.dev/getting-started/installation/vue

Nuxt Devtools

In #2196 by @romhml, you can now preview the Nuxt UI components in the Nuxt Devtools, edit their props and copy the code to use in your app.

Lucide Icons

We migrated from heroicons to lucide icons in #2540, you can configure all your icons at once if you want to switch back: https://ui3.nuxt.dev/getting-started/icons#theme

🚀 Features

  • Avatar: infer width / height on <img> based on size prop (c9adf33)
  • Avatar: use NuxtImg component when available (f1a14dd), closes nuxt/ui#2078
  • Badge: handle icon and avatar props (#2497) (2d52834)
  • components: improve RTL support (#2433) (94c4918)
  • DropdownMenu/ContextMenu: handle color field in items (#2510) (f66c96e)
  • InputMenu/Select/SelectMenu: arrow prop implementation (#2503) (f26f6c8)
  • Kbd: special keys for macOS and other systems (#2494) (332c6c0)
  • module: add support for vue using unplugin (#2416) (d4a943e)
  • module: devtools integration (#2196) (701c75a)
  • NavigationMenu: add item-content slot (b5ca0d9)
  • Table: customize header and cell through slots (#2457) (ef561e7)
  • theme: migrate from heroicons to lucide (#2540) (a6c1a6c)

🐛 Bug Fixes

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v3.0.0-alpha.7...v3.0.0-alpha.8