🐛 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

• @ PBK-B made their first contribution in #5400

Full Changelog: v4.2.0...v4.2.1

✨ Highlights

📅 New InputDate & InputTime components

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

🎨 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

• components: consistent exposed refs (#5385) (fce2df4)

Exposed refs now consistently return the HTML element directly instead of the component instance. This affects InputMenu, InputNumber, InputTags, Select, and SelectMenu.

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

• vite: write theme templates (#5355) (411ebcc)

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

• components: add data-slot attributes (#5447) (dd81d46)
• components: extend native HTML attributes (#5348) (5b17751)
• FileUpload: add preview prop (#5443) (2af82e7)
• InputDate: new component (#5387) (dabc4f8)
• InputTime: new component (#5302) (936253f)
• Modal: add scrollable prop (#5306) (240897e)
• module: add theme.prefix option (#5341) (7fca5d7)
• Table: handle virtualizer estimateSize as function (ebc8568)

🐛 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

• locale: add Albanian language (#5461) (3331533)
• locale: add Galician language (#5393) (e93bfd4)

👋 New Contributors

• @ GlitchDevX made their first contribution in #5317
• @ onmax made their first contribution in #5346
• @ rodriciru made their first contribution in #5405
• @ NyllRE made their first contribution in #5410
• @ usmanibrahim74 made their first contribution in #5418
• @ hfersu made their first contribution in #5393
• @ rudrokhanpro made their first contribution in #5448
• @ y-l-g made their first contribution in #5396
• @ Rolanddoda made their first contribution in #5461

Full Changelog: v4.1.0...v4.2.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).

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

🚨 Breaking Changes

We apologize for these small breaking changes. With 110+ components in the library, we occasionally need to make corrections to maintain consistency and quality. We aim to minimize breaking changes, but sometimes they're necessary to improve the developer experience in the long run.

• CommandPalette: add children-icon prop to use trailing-icon in input (#4397) (edda8a6)

The trailing-icon prop is now used for the Input, and a new children-icon prop has been added to customize the icon for child items:

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

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

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

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

🚀 Features

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

🐛 Bug Fixes

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

🌐 Locales

• locale: add Croatian language (#5293) (b84d67b)

👋 New Contributors

• @ OlegChuev made their first contribution in #5136
• @ victorgarciaesgi made their first contribution in #5178
• @ DevAdedeji made their first contribution in #5169
• @ KazimirPodolski made their first contribution in #5176
• @ Antoine-Regembal made their first contribution in #5219
• @ Lenni009 made their first contribution in #5283
• @ Ismaele-silla made their first contribution in #5197
• @ mbanusic made their first contribution in #5293
• @ brendonmatos made their first contribution in