NuxtUi Theme broken

<template>
  <div>
    <NuxtRouteAnnouncer />
    <UApp>
      <UHeader title="Test Page">
        <UNavigationMenu :items="items" />
      </UHeader>

      <UMain class="mt-8">
        <NuxtLayout>
          <NuxtPage />
        </NuxtLayout>
      </UMain>

      <UFooter>
        <template #left>
          <ClientOnly>
          </ClientOnly>
        </template>
      </UFooter>
    </UApp>
  </div>
</template>
<script setup lang="ts">
import type {NavigationMenuItem} from "#ui/components/NavigationMenu.vue";

const items = ref<NavigationMenuItem[]>([
  {
    label: "Test",
    icon: "fa7-solid:wrench",
    children: [
      {
        label: "Test Item 1",
        icon: "fa7-solid:wrench",
        href: "/test",
        description: "This is a little description",
      },
    ],
  },
])
</script>

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxt/image', '@nuxt/ui'],
  css: ['@/assets/css/tailwind.css'],
  ui: {
    experimental: {
      componentDetection: true
    }
  }
})

{
  "name": "dginx-test",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/image": "^2.0.0",
    "@nuxt/ui": "^4.2.1",
    "nodemailer": "^6.9.15",
    "nuxt": "^4.2.1",
    "typescript": "^5.9.3",
    "vue": "^3.5.24",
    "vue-router": "^4.6.3"
  },
  "devDependencies": {
    "@types/nodemailer": "^7.0.4"
  }
}

@import "tailwindcss";
@import "@nuxt/ui";