@nuxt/ui 4.11.0 on Node.js NPM

✨ Highlights

↔️ 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.

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

🎨 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.

📦 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.

🚀 Features

CheckboxGroup/RadioGroup: support icon in items (#6726) (07f3fe8)
ProgressGroup: new component (#6860) (14ac243)
Splitter: new component (#6670) (ae2bd5e)
locale: validate locales against CLDR in CLI and tests (#6826) (387ce9a)
vue: support experimental.componentDetection (#6731) (3a568b5)

🐛 Bug Fixes

AuthForm: type submit payload with the schema output (#6816) (795c353)
Calendar: correct size scale (#6832) (29f9890)
CommandPalette: always escape search highlight to prevent XSS (#6741) (2a172ef)
components: resolve theme props consistently in form controls (#6834) (7c74269)
ContentToc: prevent list from collapsing (#6778) (706cfd0)
Editor: ignore updates without document changes (#6807) (7e615e1)
Icon: render bundled icons during SSR in Vue (#6841) (545f9e3)
locale: correct native names and tajik language code (#6823) (e333e8d)
locale: correct slide placeholder casing in lb (#6822) (10ec237)
Marquee: use logical properties and drop broken vertical RTL animation (#6833) (9b08a84)
Modal: emit transition events from overlay when scrollable (#6786) (5afbd5c)
Slider: bind form aria attributes on thumbs instead of root (#6768) (f3c2ac2)
Slider: forward aria attributes to the thumb (#6848) (d6c3802)
theme: blank top-level base in applyUnstyled (#6825) (3e89ea7)
theme: keep variants when replacing slot classes in app config (#6824) (0fabbe5)
Theme: merge class from props with the component class (#6842) (731ff26)
theme: replace deprecated bare tailwind aliases (#6865) (d4f2ca0)
theme: respect reduced motion on remaining movement transitions (ce5b1df)
theme: unify motion easing and respect prefers-reduced-motion (#6742) (735b264)
Tree: use logical padding for indentation (#6815) (958a3ba)

🔥 Performances

Button/Select/SelectMenu/InputMenu: narrow reactive dependencies (#6736) (6bd1dfc)
components: memoize tv slot invocations with simple args (#6737) (4200e80)

🌐 Locales

locale: add Austrian language (#6806) (80cad10)

❤️ Contributors

Full Changelog: v4.10.0...v4.11.0

@nuxt/ui 4.11.0 v4.11.0 on Node.js NPM