Nuxt UI v4.8.0

✨ 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

• @benjamincanac
• @Bobakanoosh
• @maximepvrt
• @zAlweNy26
• @Akur1a

Full Changelog: https://github.com/nuxt/ui/compare/v4.7.1...v4.8.0