nuxt/ui v4.5.0 on GitHub

✨ Highlights

🎨 New Theme component

The Theme component lets you override the theme of all child components without modifying each one individually. Pass an object to the ui prop where keys are component names and values are their slot class overrides:

<UTheme
  :ui="{
    button: {
      base: 'rounded-full'
    },
    input: {
      base: 'rounded-full'
    }
  }"
>
  <UButton label="Button" color="neutral" variant="outline" />
  <UInput placeholder="Search..." />
</UTheme>

The Theme component doesn't render any HTML element. It uses Vue's provide / inject under the hood, so overrides propagate through the entire component tree regardless of nesting depth. Theme components can be nested (innermost wins) and the ui prop on individual components always takes priority.

🌈 New neutral colors

Thanks to Tailwind CSS v4.2, four new neutral color options are now available: taupe, mauve, mist and olive. Configure them through the ui.neutral option in your app.config.ts.

🚫 Duplicate toast prevention

The Toaster now automatically prevents duplicate toasts and displays a pulse animation when a duplicate is triggered, providing a cleaner notification experience.

1oUPxZsXIbjXRiJt.mp4

🚀 Features

DashboardSidebar/Header: add autoClose prop (#6089) (2663deb)
EditorDragHandle: proxy nested / nestedOptions props and emit hover event (#5960) (ed60193)
Form: add HTML5 validation to programmatic submit (#6002) (ed552fc)
module: add support for taupe / mauve / mist / olive neutral colors (#6081) (bc49d3f)
NavigationMenu: allow tooltip usage in horizontal orientation (#5682) (f46b504)
NavigationMenu: handle chip in items (#6064) (401a2c0)
ScrollArea: add skipMeasurement virtualize option (#5721) (548b711)
Select/SelectMenu: add hover effects on outline and subtle variants (94b0c31)
Theme: new component (#4387) (c97047d)
Toaster: prevent duplicate toasts and add pulse animation (3f6581a)

🐛 Bug Fixes

BlogPost/ChangelogVersion: use ImgHTMLAttributes type for image prop (#6007) (0185856)
ChatMessages: allow message props to override role defaults (#6000) (f64ec17)
ChatMessages: prevent flash at top before scrolling to bottom on mount (4bdcb83)
Checkbox/Switch: prevent data-state conflict when used inside Tooltip (2bb1a8b), closes #3599
CheckboxGroup: update update:modelValue emit type (#5927) (64d2e88)
ColorModeImage: add baseURL support for public paths (#6006) (db510f3)
components: add fixed prop to prevent responsive text size reduction (#6074) (8f5f44c)
components: nullable and optional type support (#6060) (cd3432b)
components: prevent iOS auto-zoom on input fields with font-size below 16px (#6040) (1262016)
ContentNavigation: pass nested child data to slots (#6043) (e67f77e)
defineShortcuts: add alt key guard (#6020) (8451f45)
defineShortcuts: allow shifted special character shortcuts (08facc0)
Drawer/Modal/Popover/Slideover: prevent unexpected close on touch when interacting with other overlays (#5695) (e2c038c)
Editor: handle placeholder in RTL mode (#5977) (3cc16e3)
EditorMentionMenu: use char prop as mention prefix instead of always @ (0b9b097), closes #6035
EditorToolbar: proxy size prop to dropdown menu (8f8d989)
InputMenu/InputNumber/SelectMenu: proxy size to buttons (1ec1698), closes #5958
InputMenu/Select/SelectMenu: exclude cosmetic items from model value type (#6044) (22cf1ea)
InputMenu/SelectMenu: sort filtered items by match relevance (058c66b), closes #4672
InputMenu: prevent focus on trailing button (88073b6)
module: update icon cssLayer option from components to base (#6076) (e8bc322)
NavigationMenu: allow clicking trailing slot in horizontal orientation (7f9996f), closes #5192 #6083
NavigationMenu: unique auto-generated item values for grouped items (7b317d9)
PricingPlan: truncate title (#6041) (8e86c51)
Select: remove useless by prop (14dceaf)
Table: improve perfs with shallowRef when watch deep is disabled (#6023) (bc06ce2)
Toast: allow update to keep toast open and reset duration (82afa0a)
Toast: improve animation smoothness (#6065) (ee2c0a5)
types: improve DotPathKeys accuracy and GetItemKeys performance (#6077) (6f7af3e)
useEditorMenu: rank filtered results by relevance (f53484a)

🌐 Locales

locale: add Belarusian language (#5972) (ac9e7b3)

👋 New Contributors

@LouisHaftmann made their first contribution in #5927
@quentingiraud-ugo made their first contribution in #5695
@imfaizanyousaf made their first contribution in #5966
@solidprinciples made their first contribution in #5960
@saurlax made their first contribution in #6000
@veeceey made their first contribution in #6007
@cngJo made their first contribution in #6009
@KazariEX made their first contribution in #6020
@danielkasperczyk made their first contribution in #6043
@mateusznarowski made their first contribution in #6081
@karladler made their first contribution in #6076

Full Changelog: v4.4.0...v4.5.0