@nuxt/ui

:sparkles: Highlights

:bar_chart: Chart component

A new Chart component built on TanStack Charts renders line, area, bar and donut charts as an SVG on the server. Series colors follow your theme and color mode through the new --ui-chart-* CSS variables:

<script setup lang="ts">
const data = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 }
]
</script>

<template>
  <UChart
    type="bar"
    :data="data"
    index="month"
    :categories="[{ key: 'desktop', label: 'Desktop' }, { key: 'mobile', label: 'Mobile' }]"
    stacked
  />
</template>

[!NOTE]
@tanstack/charts is an optional peer dependency, install it to use the component. When the props are not enough, the definition prop takes a full TanStack chart definition.

:globe_with_meridians: Automatic locale with @nuxtjs/i18n

When @nuxtjs/i18n is installed, the App component now follows the current i18n locale, and only the Nuxt UI locales matching your i18n.locales are bundled. You can drop the import * as locales pattern, which shipped every locale in the entry chunk:

- <script setup lang="ts">
- import * as locales from '@nuxt/ui/locale'
-
- const { locale } = useI18n()
- </script>
-
  <template>
-   <UApp :locale="locales[locale]">
+   <UApp>
      <NuxtPage />
    </UApp>
  </template>

[!TIP]
An explicit locale prop still wins, see the i18n guide.

:zap: Lighter and faster pages

Pages now load up to 27% less JavaScript. A page no longer loads the code of components only other pages use, and overlays are lazy loaded: the menu of Header, Sidebar and DashboardSidebar, the command palette of DashboardSearch and ContentSearch, and the toasts of Toaster.

[!NOTE]
UButton also mounts about 38% faster and each item of an open DropdownMenu about 30% faster, since link props are now picked without a reactive proxy.

:rocket: Features

• App: follow the @nuxtjs/i18n locale

• Calendar: add yearsPerPage prop

• Chart: new component

• ChatReasoning: add autoOpen prop

• CheckboxGroup: add max prop

• components: add loop prop

• components: allow controlling heading element via as prop

• ContextMenu: add open and pressOpenDelay props

• FileUpload: add reject event for dropped files

• FileUpload: support custom file items in v-model

• InputMenu: add default slot

• InputNumber: add startingValue and allowInvalid props

• module: export prose components from @nuxt/ui/components/prose

• NavigationMenu: add viewport prop

• ProsePrompt: add prompt prop

• Sidebar: add breakpoint prop

• Toast: add closeOnClick to actions

:bug: Bug Fixes

• App: forward nonce prop

• Chart: render tooltip above center slot

• ChatMessages/ChatPromptSubmit: add accessible names to icon buttons

• ColorModeButton: resolve label after mount

• components: localize hardcoded accessibility labels

• components: prevent empty trailing slot when loading

• components: spin trailing loading icon with avatar

• ContentSearch/DashboardSearch: handle undefined selection when an item is toggled off

• ContentToc: raise list min height

• Drawer: don't disable body pointer events with noBodyStyles

• Drawer: emit after:leave and after:enter when the animation ends

• Editor: align link styles with prose

• FileUpload: make the dropzone prop reactive

• Form: accept empty values in state type

• Kbd: avoid hydration mismatch for platform-specific keys

• Link: promote queued prefetch on interaction

• Listbox: add accessible name to listbox

• Pagination: localize aria-label of controls and pages

• ProseA: hide underline on focus and around inline code

• SelectMenu: keep controls outside the listbox

• SelectMenu: keep menu open when focus moves outside

• Slideover: only cap width from sm breakpoint

• Table: measure virtualized rows with variable heights

• Table: respect defaultColumn cell and header

• theme: remove unknown and conflicting classes

• Tree: pass disabled to tree item

• useToast: skip pulse while toast is animating

• useTour: accept any CSS selector as step target

:fire: Performances

• components: import Reka UI primitives by name instead of from reka-ui/namespaced

• components: pick link props without a reactive proxy

• DashboardSearch/ContentSearch: lazy load modal and command palette

• Header/DashboardSidebar/Sidebar: lazy load menu overlay

• Toaster: lazy load toast component

• useComponentProps: skip prop resolution for Vue internal flags

:green_heart: Contributors

• @benjamincanac

• @kazbekaskarov

• @danielroe

• @61021

• @cristianchiriac

• @derblub

• @devotee101

• @giaBaoJS

• @leo-2-ga-ha

• @MFA-G

• @minwookshin

• @rdjanuar

• @ttcchhmm

• @vachmara

:bug: Bug Fixes

• App: apply the dir prop to the provided locale

• ChatPrompt: add method="post" to prevent input leaking via GET before hydration

• CheckboxGroup/RadioGroup: lift a hovered table item above its neighbors

• ContentSearch/DashboardSearch: use translated search label as dialog title

• DashboardSidebar/Header: use translated toggle label as menu dialog title

• EditorToolbar: use tooltip text as aria-label on icon-only buttons

• Form: include nested forms in parent dirty state

• Form: keep dirty state and validation in sync with input

• Form: merge unnamed nested forms into a parent without schema

• module: detect kebab-case components in Pug templates

• module: generate classes prefixed by usePrefix

• module: use @custom-variant for light and dark variants

• ProseA: only round corners on focus

• Select/SelectMenu: keep focus moved on selection

• Table: keep footer separator above pinned columns

• theme: drop double quotes from class strings

• useFilter: keep labels and separators in place while sorting

• useOverlay: resolve every pending promise when reopened

• security

  utils: prevent prototype pollution in set and setAtPath

:green_heart: Contributors

• @benjamincanac

• @61021

• @dasjideepak

• @giaBaoJS

• @lazerg

• @parsajiravand

• @rdjanuar

:bug: Bug Fixes

• components: allow partial ui overrides on items

• components: fall back to md for custom sizes in virtualizer

• DashboardNavbar: render title only when defined

• FieldGroup: add defaultVariants in theme

• Form: clear only the targeted field inside a nested form

• Input/Textarea: keep 0 with nullable and optional modifiers

• InputDate/InputTime: emit focus and blur when focus enters or leaves the field

• InputMenu: ignore multiple in autocomplete mode

• InputMenu: prevent tags input from adding the search term on enter

• InputMenu: round corners inside a FieldGroup in multiple mode

• Link: propagate click handler errors to Vue error handling

• PinInput: emit blur whenever focus leaves the group

• SelectMenu/InputMenu: ignore clear button when disabled

• SelectMenu: open menu on arrow keys

• SelectMenu: remove the inherited "Show popup" aria-label (aab2d10), closes #6962

• Table: emit aria-sort on sortable th elements

• Table: inset row focus outline

• Table: make rows with a select event keyboard accessible

• Toaster: prevent onClick from being called twice

• vue: resolve explicit component imports to their Vue overrides

:green_heart: Contributors

• @benjamincanac

• @lazerg

• @61021

• @dvd233

• @giaBaoJS

• @al1maher

• @elisterken

• @ianshk

• @mikenewbon

• @oliver139

• @zvn2060

:bug: Bug Fixes

• ChatMessages: add missing color to user and assistant props

• Checkbox/RadioGroup: add flex-wrap on list and card variants

• Checkbox/RadioGroup: use border-default on card and table variants

• CommandPalette: keep astral characters intact when truncating search results

• Form: omit method attribute on nested forms

• InputNumber: work uncontrolled with only a default value

• Link: restore prefetching with Nuxt 4.5 custom slot

• Link: wait for onNuxtReady before observing visibility

• NavigationMenu: avoid duplicate accordion trigger on items without to

• ProseCodeTree: invoke default slot from render

• Select/SelectMenu: add responsive text size

• SelectMenu: prevent search input focus on open with autofocus: false

• Slider: emit a number for a single thumb

• Table: exclude hidden columns from colspan

:green_heart: Contributors

• @benjamincanac

• @lazerg

• @61021

• @arsalan507

• @gunhaxxor

• @hacknug

• @larbish

• @mateusznarowski

• @TimGonnet

:sparkles: Highlights

:left_right_arrow: Splitter component

A new Splitter component lets you build layouts with resizable panels separated by draggable handles, with min/max sizes, collapsible panels, nesting and vertical orientation:

<script setup lang="ts">
import type { SplitterItem } from '@nuxt/ui'

const items: SplitterItem[] = [
  { slot: 'sidebar', minSize: 15, maxSize: 40, defaultSize: 25 },
  { slot: 'main', defaultSize: 75 }
]
</script>

<template>
  <USplitter id="layout" :items="items" class="h-96">
    <template #sidebar>
      Sidebar
    </template>

    <template #main>
      Main
    </template>
  </USplitter>
</template>

[!TIP]
Set the id prop when rendering on the server so ids match on hydration, and auto-save-id to persist the layout to localStorage.

:bar_chart: ProgressGroup component

A new ProgressGroup component displays multiple values as segments of a single progress bar, with a legend listing each item. Items take any theme color or a CSS color, and the status prop shows the total:

<script setup lang="ts">
import type { ProgressGroupItem } from '@nuxt/ui'

const items: ProgressGroupItem[] = [
  { label: 'System', value: 24, color: 'neutral', icon: 'i-lucide-cog' },
  { label: 'Apps', value: 8, color: 'error', icon: 'i-lucide-app-window' },
  { label: 'Multimedia', value: 42, color: 'success', icon: 'i-lucide-film' }
]
</script>

<template>
  <UProgressGroup :items="items" :max="128" status />
</template>

:art: Snappier motion

Animations and movement transitions now all run on --ease-out, exits included. Override the token in your @theme to retime the whole library, see the Motion section:

@theme {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[!NOTE]
prefers-reduced-motion now covers overlays too, they fade in place, and movement transitions like the Tabs indicator stop.

:package: Component detection for Vue

The @nuxt/ui/vite plugin now supports experimental.componentDetection like the Nuxt module. It scans your source and only generates the theme CSS for the components you use:

import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      experimental: {
        componentDetection: true
      }
    })
  ]
})

[!NOTE]
Pass an array of component names instead to include components rendered with <component :is> that can't be detected.

:rocket: Features

• CheckboxGroup/RadioGroup: support icon in items

• ProgressGroup: new component

• Splitter: new component

• locale: validate locales against CLDR in CLI and tests

• vue: support experimental.componentDetection

:bug: Bug Fixes

• AuthForm: type submit payload with the schema output

• Calendar: correct size scale

• security

  CommandPalette: always escape search highlight to prevent XSS

• components: resolve theme props consistently in form controls

• ContentToc: prevent list from collapsing

• Editor: ignore updates without document changes

• Icon: render bundled icons during SSR in Vue

• locale: correct native names and tajik language code

• locale: correct slide placeholder casing in lb

• Marquee: use logical properties and drop broken vertical RTL animation

• Modal: emit transition events from overlay when scrollable

• Slider: bind form aria attributes on thumbs instead of root

• Slider: forward aria attributes to the thumb

• theme: blank top-level base in applyUnstyled

• theme: keep variants when replacing slot classes in app config

• Theme: merge class from props with the component class

• theme: replace deprecated bare tailwind aliases

• theme: respect reduced motion on remaining movement transitions

• theme: unify motion easing and respect prefers-reduced-motion

• Tree: use logical padding for indentation

:fire: Performances

• Button/Select/SelectMenu/InputMenu: narrow reactive dependencies

• components: memoize tv slot invocations with simple args

:globe_with_meridians: Locales

• locale: add Austrian language

:green_heart: Contributors

• @benjamincanac

• @lazerg

• @61021

• @arsalan507

• @Barbapapazes

• @danielroe

• @eitea-phil

• @hieuNV0871

• @J-Michalek

• @KQraze

• @luc122c

• @mathieutu

• @onmax

• @phat-dang

• @solidusite

• @yamachi4416