nuxt/ui v4.8.0 on GitHub

✨ Highlights

🎨 Theme component prop defaults

The Theme component can now override default prop values for all descendant components. Pass a props object where keys are component names and values are their prop overrides:

<template>
  <UTheme
    :props="{
      tooltip: { delayDuration: 0, arrow: true },
      button: { color: 'neutral', variant: 'subtle', size: 'lg' },
      input: { size: 'lg' }
    }"
  >
    <UTooltip text="Tooltip">
      <UButton label="Save" />
    </UTooltip>

    <UInput placeholder="Search..." />
  </UTheme>
</template>

Explicit props on a component always take priority. Theme components can be nested (innermost wins) and propagate through the entire tree via provide / inject.

🔍 ContentSearch async search

The ContentSearch component now supports FTS5 full-text search via the new search prop and the useSearchCollection composable (nuxt/content#3787, released in @nuxt/content v3.14.0). Instead of loading all content upfront with files and filtering client-side with Fuse.js, you can now run async queries with highlighted snippets:

<script setup lang="ts">
const { search, status, init } = useSearchCollection('content', {
  immediate: false,
  ignoredTags: ['style']
})

const { open } = useContentSearch()

watch(open, (value) => {
  if (value && status.value === 'idle') {
    init()
  }
})
</script>

<template>
  <UContentSearch :search="search" :search-status="status" />
</template>

You can check out the new search on https://ui.nuxt.com or https://nuxt.com.

🚨 Breaking Changes

InputMenu: rename autocomplete prop to mode to free up HTML attribute (#6474)

The boolean autocomplete prop introduced in v4.6.0 collided with the standard HTML autocomplete attribute used for browser autofill (address-line1, one-time-code, email, etc.). It has been renamed to mode which accepts 'combobox' | 'autocomplete' (defaults to combobox). The HTML autocomplete attribute now falls through to the inner input like other form components.

- <UInputMenu autocomplete :items="items" />
+ <UInputMenu mode="autocomplete" :items="items" />

🚀 Features

Avatar/AvatarGroup: add color prop (#6405) (6f2396f)
Breadcrumb: add color prop (#6406) (955dac1)
ChatMessage: add body slot and improve actions alignment (#6460) (48685b6)
ChatMessage: add color prop and header slot (#6407) (c6ce8ca)
ChatPrompt: add submitOnEnter prop to control Enter behavior (b597f90)
Checkbox/RadioGroup/Switch: add highlight prop for error ring styling (a0deee4)
CommandPalette: search and highlight description field (524c34d)
ContentSearch/DashboardSearch: enable Fuse.js token search by default (ba08220)
ContentSearch: add async search support via useSearchCollection (#6432) (a1bef8b)
DashboardGroup: add storageOptions prop (8f0101b)
Error: add icon prop and leading slot (e6ea707)
Separator: add position prop (#6415) (844660a)
Theme: override component prop defaults (#6031) (71c008e)

🐛 Bug Fixes

ChatMessage: add wrap-break-word to content slot (#6476) (eb468e6)
CommandPalette: only split tokens in highlight when useTokenSearch is enabled (898fbce)
CommandPalette: preserve relative order of ignoreFilter groups (e4c1787)
CommandPalette: re-highlight first item after debounced results render (efd7b8e)
CommandPalette: update default fuse keys in docs and search components (0d9cc0d)
components: apply theme.prefix to hardcoded utility classes (f51b1e8)
components: constrain popper content to available viewport height (007b136)
ContentSearch: preserve intermediate ancestors in breadcrumb prefix (#6466) (f639b19)
ContentToc: apply ui.trigger prop to trigger elements (252b906)
defineShortcuts: use e.code for alt shortcuts to handle macOS key remapping (231f156)
FileUpload: pass disabled attribute to button variant (2890c83)
Form: improve errors type (#6208) (c1090ab)
InputMenu/Select/SelectMenu: respect trailing: false over default trailingIcon (#6457) (65b47ce)
InputMenu: rename autocomplete prop to mode to free up HTML attribute (#6474) (2799fa6)
module: don't require @nuxtjs/mdc when using content option (89f7778)
module: pass computed ref directly to useHead innerHTML (00b7476)
module: ship stripped #build/ui.css fallback for tooling (083c2a9)
ProseKbd: add default slot and make value optional (f317c7f)
Textarea: autoresize on mount with pre-filled value (e96a0b6)
useComponentProps: treat array-typed theme values as ClassValue leaves (cac3860)

👋 Contributors

Full Changelog: v4.7.1...v4.8.0