Nuxt UI v4.11.0

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

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

:globe_with_meridians: Locales

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

❤️ Contributors

• @benjamincanac
• @lazerg
• @61021
• @arsalan507
• @Barbapapazes
• @danielroe
• @eitea-phil
• @hieuNV0871
• @J-Michalek
• @KQraze
• @luc122c
• @mathieutu
• @onmax
• @phat-dang
• @solidusite
• @yamachi4416

Full Changelog: https://github.com/nuxt/ui/compare/v4.10.0...v4.11.0