Releases
Released on April 24, 2026

โœจ Highlights

๐Ÿ“‹ New Listbox component

The Listbox component is a selectable list of items with built-in search, virtualization, and rich item rendering. It's ideal when you want an always-visible list without the overlay behavior of SelectMenu.

<script setup lang="ts">
const items = ref([
  { label: 'France', icon: 'i-lucide-map-pin', value: 'FR' },
  { label: 'Germany', icon: 'i-lucide-map-pin', value: 'DE' },
  { label: 'Italy', icon: 'i-lucide-map-pin', value: 'IT' },
  { label: 'Spain', icon: 'i-lucide-map-pin', value: 'ES' }
])

const value = ref()
</script>

<template>
  <UListbox v-model="value" :items="items" />
</template>

๐Ÿค– New ProsePrompt component

The ProsePrompt component displays pre-built AI prompts inside your docs with one-click copy and direct IDE integration. Users can copy the prompt to their clipboard or open it directly in Cursor or Windsurf via the actions prop.

::prompt
---
description: Build a dashboard layout with Nuxt UI.
icon: i-lucide-layout-dashboard
actions:
  - copy
  - cursor
  - windsurf
---
You are a Nuxt UI expert. Help me build a dashboard layout with
a collapsible sidebar and a sticky top navbar.
::

The Link component now integrates automatically with @nuxtjs/i18n when installed. Internal links are localized using the $localePath helper under the hood (#5537).

<template>
  <!-- Automatically becomes /en/about or /fr/about based on current locale -->
  <ULink to="/about">About</ULink>
</template>

This also propagates to every component that accepts a to prop (NavigationMenu, Breadcrumb, DropdownMenu, CommandPalette, etc.), so routes stay locale-aware across your entire app.

๐Ÿš€ Features

๐Ÿ› Bug Fixes

  • Accordion/Tabs: use item value as stable key to avoid remounts (#6380) (3cee610)
  • Avatar: remove leading-none from fallback (#6383) (77ce09a)
  • ChatMessage/ChatMessages: preserve generic message type in slot scope (#6391) (20f66db)
  • ChatMessages: prevent layout shift caused by indicator during streaming (#6297) (b7160e2)
  • ChatMessages: use MutationObserver for auto-scroll during streaming (#6357) (47bf3cb)
  • ChatPromptSubmit: ignore disabled prop when status is not ready (600a2ca)
  • components: resolve defaultVariants in template logic (#6361) (75b37d0)
  • ContentSearch/DashboardSearch: pick shared props from CommandPalette (cdcf2e5)
  • ContentSearch: speed up navigation mapping (0faf2c2)
  • ContentToc: use links for scrollspy instead of hardcoded h2/h3 (#6282) (6aba2ea)
  • FieldGroup: prevent context from leaking into portals (#6313) (5155e27)
  • FileUpload: use form field color and highlight instead of raw props (bb5a9ed)
  • Header/DashboardSidebar/Sidebar: allow auto focus in menu for proper focus trapping (#6266) (9b91ee4)
  • InputDate/InputTime: increase segments width (#6339) (4ebdb2f)
  • InputTags: add missing field group variant (#6326) (aae5378)
  • Link: ensure single-root rendering for v-show and $el resolution (#6310) (2c4ff35)
  • Modal/Slideover: drop empty header wrapper when empty (#6381) (1082960)
  • module: use relative tagPriority for inline style tags (#6299) (ae693d0)
  • PricingTable: align header elements vertically (#6111) (0daacb0)
  • PricingTable: handle RTL mode (#6382) (ab203db)
  • ProseCodeCollapse: match background on overscroll (28c89fe)
  • ProseImg: respect markdown width attribute (#6350) (d4e4ea1)
  • ProsePre: get code from DOM if code prop is missing (#6333) (b808ce4)
  • Select: support item-aligned position mode (#6358) (255807a)

๐Ÿ‘‹ New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v4.6.1...v4.7.0